全ページヘッダーを透過にした時かつスクロール時の画面のちらつき

[mthaichi]

「ヘッダー透過を有効にする」を「すべてのページに」した時かつPCでの閲覧時かつ「トップページ以外」で一度下げたスクロールを上に戻す時に、画面がちらつく。そんなに支障をきたすものではないのですが、しばらく前から気になっていたのであげておきます。（毎回ではなく、2-3回に1回ぐらいの割合で出現するので、何度も繰り返しスクロールup/downしてください）

2025-11-28.15-48-47.mp4

[goutetsuguma]

@mthaichi
こちら確認したところ、【カスタマイザー】> 【Lightning ヘッダー設定】の「ヘッダー高さ」で高さを固定するとチラつきがなくなりました。
透過ヘッダーの場合、ヘッダー高さを指定することが前提の仕様となっており、高さ未指定の場合は JavaScript で高さを取得するため、読み込みタイミングによってチラつきが発生することがあるようです。
以下のページにも記載がありました。

https://lightning.vektor-inc.co.jp/lightning-g3-pro-unit/header-setting/

利用上の注意
透過利用の場合はできるだけヘッダー高さを登録してください
ヘッダー透過処理をするにあたって、標準ではヘッダーの高さをJavaScriptで取得して各種調整を行っています。しかしがら、JavaScriptの実行開始・処理が終わるまで表示に時間がかかるため、予め高さを登録する機能があります。

外観 > カスタマイズ > Lightning ヘッダー設定 パネル内から、ヘッダーの高さを登録してあると、JavaScript を読み込まずにこの数値を元にCSSだけで処理を行うので、表示が安定し、表示速度も早くなります。

そのため、透過ヘッダーを利用する場合はヘッダー高さを設定する仕様のようでした。

この機能自体がなんなのかが気付きにくいので、ヘッダー高さ の説明のところに「透過利用の場合はできるだけヘッダー高さを登録してください」の文言があっても良いのかもしれないですね　（もしくは透過を選択した時にアラートみたいなものが出るなど）