[ 解決済 ] サイト表示時にグローバルナビが一瞬動く（広がる）現象を修正したい。

[まき]

■ WordPress のバージョン
WordPress 6.9.1

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit

■ テーマのバージョン
15.33.1

■ Pro Unit のバージョン
0.29.10

■ スキンの種類
Origin III

■ 期待する動作
この度もお世話になります。

サイト表示時にグローバルナビが一瞬動く（広がる）現象を修正したいです。

■ 自分で試した事
下記、追加CSSにてヘッダーをカスタマイズしています。
AIに相談すると、このCSSが原因でグローバルナビが一瞬動く（広がる）現象が起きているような回答になります。しかし、AIでは修正出来ず質問させていただきました。

———————————————-

ヘッダーを全幅にして、100％→95％に設定しています。
↓
/*——————————–
ヘッダーコンテナとヘッダートップを全幅
———————————*/
.header-top .container,
.site-header-container{
width: 95%;
max-width: 100%;
}

/*リンク領域をロゴのみに*/
.site-header .site-header-logo{
width: fit-content;
}

/*ヘッダーロゴ上下余白*/
.site-header-logo {
text-align: left;
       padding-top: 1.1rem;
margin-bottom: 1.1rem;
margin-left: 0;
}

———————————————-

モバイル時はヘッダーを固定にしています。
そして、PCサイトのページヘッダーが透過と透過無しと混在しているため、全ページ統一でヘッダー透過無しにしています。
このCSSはAIで作成したものです。
↓
/*********************
モバイル時（～991.98px）
– ヘッダー固定
*********************/
@media (max-width: 991.98px) {
/* ————————–
ヘッダー固定（共通）
—————————*/
.site-header{
position: fixed !important;
background: #fff !important;
top:0px;
}
.header_scrolled .site-header-logo {
display: block;
}
.site-header + * {
margin-top:52px !important;
}

/* ————————–
ロゴ切り替え
—————————*/

/* 元画像を透明化して背景画像に置き換える準備 */
.site-header-logo img {
opacity: 0;
width: auto !important;
height: auto !important;
}

/* ロゴ背景を使用 */
.site-header-logo a span {
display: block;
width: fit-content;
height: 38px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;

/* 通常時ロゴ */
background-image: url(“https:◯◯◯◯◯◯◯◯◯◯”);
}
}

■ 症状が発生するブラウザ
Chrome、Edge

■ 実際の症状
キャッシュ系プラグインのCSS最適化などはオフにしています。
AI提案の修正CSSも沢山試しましたが修正できませんでした。

よろしくお願いいたします。

---

該当URL : https://*********

※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます

[瀬戸内ことり]

ご利用のサーバーはエックスサーバーでしょうか？
であれば、XPageSpeed の設定をご確認ください。
https://www.xserver.ne.jp/manual/man_server_xpagespeed.php

(「サイト表示の前に一瞬、管理画面が表示される」現象に悩まされたことがあり、こちらを切ることで解決しました。

が･･･違ったらすみません！)

[対馬 俊彦]

> サイト表示時にグローバルナビが一瞬動く（広がる）現象

私の環境（Windows 11 ＋ Chrome / Edge / Firefox）ではこの現象が確認できません。

もし可能でしたら、具体的な動きをスクリーンショットか動画で提示していただくと
回答が得られやすいかもしれません。

ことりさん、
このサイト を使うと、どこのサーバーを使っているか調べることができます。

[まき]

返信遅くなりました。

■瀬戸内ことり 様

コメントありがとうございますm(__)m

エックスサーバーではないのですが、こちらのサーバーにCSS圧縮などの設定があるのかサポートに確認してみました。

———————-
GZIP圧縮などの機能はご利用いただけますが、通常は無効となっております。
「.htaccess」など記載いただくことで利用可能となります。

設置されております。「.htaccess」内にキャッシュの制御等がございましたので、そのあたりの要因等の可能性もございますが、プラグインの仕様等がわかりかねる上、サーバー内のコンテンツにつきましてはサポートできかねるため原因ついては弊社でも分かりかねます。
———————-

との回答でしたので、サーバー環境はそのままといたしました。

■対馬 俊彦　様

いつもお世話になりますm(__)m

『グローバルナビが一瞬動く（広がる）現象』ですが、現在は私の環境（Windows 11 ＋ Chrome / Edge）でも起こっていません。

今までの経緯として、キャッシュを削除後、すぐの環境ではこの現象が起きないことがあります。今がその状態だと思います。ですが、今までは時間の経過と共に、現象が起きていました。

少し経過をみながら状況確認させていただきたいと思います。

※グローバルナビが一瞬動く（広がる）の具体的な挙動ですが、メニューの左側へ一瞬広がって、もとに戻る感じです。
その場合でも全てのメニューで起きるわけではなく、メニュー7項目のうち数個で起きます。

素人考えで、キャッシュが入れ替わるタイミングでこの現象が発生している気がしています。
それがなぜなのか？サーバーのCSS圧縮が関係していたのなら、辻褄が合いそうだなとも思いました。
ただ、コアの原因がCSSの記述に問題があるのではとも考えて投稿させていただきました。

[対馬 俊彦]

いま、現象が起きてますね。

Lightning は端末の種別を判断して、
body タグに以下のどちらかのクラス名が付与されるようになっています。

PC の場合: device-pc
モバイル端末の場合: device-mobile

現在、トップページを表示すると、最初に device-mobile が付与されていて、
その後 device-pc に変わっています。これが「一瞬動く」の動作です。

たぶん、サーバー側に device-mobile が付与されたキャッシュが残っているのだと推測します。

設置されております。「.htaccess」内にキャッシュの制御等がございましたので…

サーバーのこのあたりの設定を見直せばいいのではないかと思います。

[まき]

対馬 俊彦 様

ご指摘いただいた「.htaccess」内のキャッシュ関連ファイルを修正（削除）しまして、無事解決いたしました！
大変ありがとうございましたm(__)m

————–
原因は私の設定不足（知識不足）で、プラグイン（W3 Total Cache）の「User agent groups」を有効にしていなかった為、ページキャッシュがPC/モバイルを区別せずに同じHTMLを配信？していたことのようです。

このプラグインが原因の可能性も認識してまして、一旦削除して、他のプラグインを試したりもしてましたが、管理画面からプラグインを削除（データ含む）すれば全てクリアになるものと思っていました。今回のようにサーバー内にデータが残っていて、影響が継続するとは思ってもみませんでした。

[投稿者]

投稿