SWELLのみ、他の影響を一切受けない状態で再現できたので検証中です。

skillsharejp様

コメント有難う御座います。

検証頂けるとのこと助かります。

ある程度の作業は自分でも出来ますので、また何か良い方法が御座いましたら続報頂けますと幸いです。

あくまでフルワイドブロックのみを再現したページでしか検証していませんが、下記CSSでCLSはWPT及びPSIのラボデータにおいて0になりました。

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

https://pagespeed.web.dev/analysis/https-depressed-dolphin-upglq-instawp-xyz-sample-page/hxu1rm50i0?form_factor=desktop

（WPT結果URLはwpforoが勝手にwebpと判断する謎の症状を確認したため削除しました。）

早速、CSSに適用させて頂きましたが、CLSが0になりました。

有難う御座います！

本当に助かりました。これでSearch Consoleの様子を見てみます。

本当に有難う御座いました！

ご報告いただくまで気が付かなかったので助かりました。

@skillsharejp 

ありがとうございます。

以前トピックを立てさせていただいた中の余談で「フルワイドが読み込みの際に収縮する問題」が解決しました。

https://users.swell-theme.com/forum/swell-forum/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e3%83%ad%e3%82%b4%e3%82%84%e3%82%b3%e3%83%b3%e3%83%86%e3%83%b3%e3%83%84%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e3%81%8c%e3%83%81%e3%83%a9%e3%81%a4%e3%81%8f%e5%95%8f/

理屈がちょっと分からないのですが、こちらは基本的に記述しておいた方が良いという解釈でしょうか。テーマ側で対策いただけるならありがたいですね。

こちらの記述を追加したところ、サイドバー有りのページでは、デザインが崩れました。

もとからあるCSSにtransformを追加し、leftの値と同じ数値をマイナスで指定することで対応できました。

利用している環境で変更箇所は変わるかもしれませんが、修正の方法はそのまま流用できますね。

ありがとうございます。

@media (min-width: 960px){
.-sidebar-on .l-content .alignfull, .-sidebar-on .l-content .alignwide {
left: -16px;
transform: translateX(-16px);
width: calc(100% + 32px);
}}

投稿者:: @windorz

こちらの記述を追加したところ、サイドバー有りのページでは、デザインが崩れました。

ご提案ありがとうございます。フルワイドブロックをサイドバーありの状態で使うというのをあまり想定していませんが、実際にどういったページでしょうか？TwitterかDiscordでDMでも構いませんので確認できるURLをご連絡いただけないでしょうか？

使い方としては少しおかしいかもしれません。

CTAをブログパーツで作成し投稿（サイドバー有り）の最後でウィジェットから呼び出しています。

ブログパーツは、フルワイドブロックを使って作成しています。

投稿の時はブログパーツを呼び出してもフルワイドはならないので、固定ページと投稿で共通で使っています。

確かに、サイドバー有りでも背景色やデザインを取り入れたい場合などにフルワイドブロックを利用するかもしれませんね。

試しに軽く検証してみましたが、サイドバーありの場合はwidthを%で指定してあるためか、CLSに問題はありませんでした。（サイドバーをなしに戻すとCLSは悪化するため対策は必要）

よって、サイドバーなしの時のフルワイドの対策できれば良いかと思いますので、以下のコードで良いかもしれません。

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

参考までに、私の環境で起きたことをまとめておきます。

このスレッドにあったCSSを追記したところ、フルワイドを使っていたブログパーツが左側に飛び出してしまいました。

ウィジェットから呼び出したブログパーツのHTML

<div class="w-singleBottom">
  <div id="text-3" class="c-widget widget_text">
    <div class="textwidget">
      <div class="p-blogParts post_content" data-partsid="138">
        <div class="swell-block-fullWide pc-py-0 sp-py-0 alignfull cta" style="color:#fff;background-color:#fceeca">
          <div class="swell-block-fullWide__inner l-article">
            :
            :
            :
            :
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

//もとからあるSWELLのCSS
@media (min-width: 960px){
.-sidebar-on .l-content .alignfull, .-sidebar-on .l-content .alignwide {
    left: -16px;
    width: calc(100% + 32px);
}}

//追加したCSS
.alignfull {
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
}

transfromを打ち消せばよかったので、translateX(-16px)ではなくtranslateX(0)でよかったです。

// CSSを追加

media (min-width: 960px){
.-sidebar-on .l-content .alignfull, .-sidebar-on .l-content .alignwide {
    left: -16px;
    transform: translateX(0px);
    width: calc(100% + 32px);
}
}

@windorz 

「コンテンツの背景を白にする」をオンにした場合、以下の数値に変更されるため、デザインが崩れてしまいます。

@media (min-width:960px)
.alignwide, .l-content .alignfull {
left: -48px;
width: calc(100% + 96px);
}

上書きされるよりは、サイドバーがない時（.-sidebar-offを追加）にのみ適用させた方が安全かもしれません。

@his 

そうですね。

CLSが悪化しているかどうかによって適用するのが本筋だと思いますので、

無理にすべてに適用するよりも、サイドバー無しの時だけ適用する方が良さそうですね。

ありがとうございます。

フルワイドブロックの横幅がちらつくという現象、未だに僕の方では確認できずでして、原因がよく分からずにいます。

vw単位はwindowsのスクロールバーが考慮されないため、本来は変数を使ってるのですが...。

その変数のセットが遅れるのかなとも思ったのですが、変数上書きされるまでは0として扱っているので、縮むことはないはずなんですよね... 🤔 

@loos_ryo 

なんとなく解決策が分かったかもしれません。

試しにwidth:calc(100vw - 0)としてみましたが、こちらは改善せずでした。

しかし、width:calc(100vw - 0px)と単位をつけると改善できました。

同じように width: calc(100vw - var(--swl-scrollbar_width, 0px));としたところ、改善できていました。

根本的な原因は不明ですが、単位が重要な気がします。

ただ、

.-sidebar-off .alignfull {
left: 50%;
transform: translateX(-50%);
width: calc(100vw - var(--swl-scrollbar_width, 0px));
}

あ、alingnfullのleftプロパティの0が当たっている影響ですね。

 どちらも単位をつけるとCLSもチラつきも改善しました。

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

あー！すみません原因がわかりました！

と思ったらhisさんも書いてくださってました...!

cssのlintで単位消されてたっぽいです...おっしゃるとおり、calcなので0には単位必須ですね

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