SWELLでフルワイドブロックを使うとCLSが悪化する現象の回避方法

SWELLを使ったサイトで、ページ読み込み時にレイアウトが一瞬動く現象が気になっている人はいないでしょうか？

固定ページなどでフルワイドブロックを使用して、コンテンツ領域はサイト幅にしているとその現象が起こりやすいです。

企業サイトなどで固定ページを多用する場合は、結構問題になりやすいと思います。

SWELLのフォーラムでもこの現象は報告されていて、回避方法が紹介されています。

SWELLでCLSが悪化する現象

フォーラムの以下の記事で報告がありました。

読み込み時に「フルワイド」ブロックの横幅が”記事幅”から”サイト幅”に拡大されることがCLSに悪影響を及ぼしているものと考えております。

SWELLERS' | SWELLユーザー専用サ…

フルワイドブロック利用時のCLSの件 < SWELLに関する質問 –

フルワイドブロックでCLS悪化が起きるCSS記述

.alignfull {
    left: calc(50% - 50vw);
    max-width: 100vw!important;
    position: relative;
    width: 100vw;
}

フルワイドブロックのCLS悪化を回避するCSS記述

以下のCSSを追加することでCLSの悪化は抑えることができます。

.-sidebar-off .alignfull {
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
}

変更されているのはleftの部分の位置の指定方法です。

サイドバー有りの時にはalighfullの内容が変わってしまうので、サイドバー無しの時だけalignfullの内容を書き換えます。

alignfullの時にCLSが悪化していない場合はそもそもケアする必要がありません。

Stack Overflow

Why does “left: 50%, transform: translateX(-50%)” horizontally center an element? I recently refactored some of my CSS and was pleasantly surprised to find an easier way to horizontally align my absolutely positioned element: .prompt-panel { …

SWELL バージョン2.8で修正された模様

このフルワイドブロックのCLS悪化問題ですが、CSSに単位が不足していることが根本原因と解明されたようです。

calcなので0には単位必須ですね

数日以内のアプデで修正します、すみませんでした 😫 

SWELLをバージョンアップすることで個別の修正は不要です。

SWELLをバージョンアップできない特殊な環境の場合は以下の記述を追加することで対応できます。

.alignfull {
left: calc(50% - 50vw + var(--swl-scrollbar_width, 0px)/2);
width: calc(100vw - var(--swl-scrollbar_width, 0px));
}

まとめ

変更前後のCSSは、ロジカルには同じ動きなのかもしれませんが、実際の表示の時には確かに違いが出ます。

もし、固定ページでフルワイドブロックを使用している場合は今回のCSSを追記することで簡単に対応することができます。