[ 解決済 ] トップページのスライドタイトルやページヘッダータイトルがモバイルでスクロールするとずれる現象を修正したい

[uchidaplanning]

■ WordPress のバージョン
6.7.2

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

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

■ テーマのバージョン
15.29.4

■ Pro Unit のバージョン
0.29.2

■ スキンの種類
Origin III

■ プラグインの種類・バージョン
・All In One WP Security
バージョン 5.3.8
・Contact Form 7
バージョン 6.0.5
・Enable Media Replace
バージョン 4.1.5
・Flexible Table Block
バージョン 3.4.0
・MetaSlider
バージョン 3.96.0
・SVG Support
バージョン 2.5.14
・Yoast Duplicate Post
バージョン 4.5

■ 期待する動作
現在制作中のWEBサイトにおいて
・トップページスライドショー内の「スライドタイトル」
・各ページのページヘッダー内のテキスト
がスマホ表示でスクロールしたときに上下にずれる現象が発生しているため、固定されるようにしたい。

■ 自分で試した事
・[ヘッダー設定]-[ヘッダー透過]-[ヘッダー透過を有効にする]にて「トップページ」or「全てのページ」を選択した場合に発生する。

・[ヘッダー設定]-[ヘッダー透過]-[ヘッダー透過を有効にする]にて「透過しない」
→現象が発生しない。

・固定ページで該当エリアかと思われたCSSを調整したが、改善されず
.page-header-inner [
margin-top: unset !importan;
margin-bottom: unset !importan;
]
.page-header [
height: unset !importan;
]

■ 症状が発生するブラウザ
Safari・Chrome（スマホ版）

■ 実際の症状
・トップページスライドショー内の「スライドタイトル」
・各ページのページヘッダー内のテキスト
がスマホ表示でスクロールしたときに上下にずれる

URL

HOME

スマホの実機で表示確認した際に発生する症状です。

■ その他特記事項
何らかの設定で解決しそうな気がして、いろいろと調べたのですが、解決策を見つけることができませんでした。
私の環境のみで発生する症状でしょうか。。。

[対馬 俊彦]

私の環境のみで発生する症状でしょうか。。。

私のサイトでもアップデートしたら症状が起きるようになりました。

とりあえず、以下の CSS を書いて対策しています。

@media (max-width: 991.98px) {
  #site-header {
    position: absolute;
  }
}

この CSS を使う場合、修正されたらこの CSS を忘れずに削除してください。

[uchidaplanning]

対馬様

ご回答ありがとうございます。
ご提案いただいたCSSを追加してみましたが、改善されませんでした。。。

スクロールのたびにタイトルが上下します。

ページヘッダーを非表示にしてカバーブロックで代用するしかないのでしょうか。。。

Attachments:

You must be logged in to view attached files.

[石川＠Vektor,Inc.]

お世話になっております。ベクトルの石川でございます。
ご迷惑おかけして恐れ入ります。
今しばらくお待ち願います。

[石川＠Vektor,Inc.]

対馬 様 / uchidaplanning 様

動画の症状ではタイトル部分だけが一度カクっと動いていますが、対馬様も同じ症状でしょうか？

と、言いますのは、確認したところ、おそらくヘッダー高さあたりのスクロール量でおそらくその動作ポイントの検出不良による意図しないカクカクした挙動が発生するので、ご報告の内容と症状・原因が違うのかなと思いまして確認です。

[対馬 俊彦]

対馬様も同じ症状でしょうか？

私のサイトで確認した症状はご質問者がアップされた動画とは動きが異なります。

おそらくヘッダー高さあたりのスクロール量でおそらくその動作ポイントの検出不良による意図しないカクカクした挙動が発生する

はい、私が確認した症状はそのような動きです。

ページ先頭から下に向かってスクロールするときには正常な動きをしますが、先頭に戻ろうとすると戻りたがらないようにカクカクした動きをします。

[石川＠Vektor,Inc.]

ありがとうございます。現在調査中です。
ご迷惑おかけして恐れ入りますが今しばらくお待ちくださいませ。

[石川＠Vektor,Inc.]

お待たせいたしました。
もともとご報告の症状は弊社で再現しなかったのですが、
おそらく原因と思われる箇所を修正した 0.29.3 をリリースしましたので、アップデートの上ご確認くださいませ。

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

[uchidaplanning]

石川様

ご対応いただきありがとうございます。

アップデートし確認しましたが、同一の症状が継続して見られます。。。
家族のスマホでも確認をしたのですが、iphoneのSafari、Chromeのみ文字がずれるようです。
（iphone SE 第２世代／14／15pro）
アンドロイドではズレは生じませんでした。
（Google Pixel）

同様の仕様でLinghtningを別サイトで利用させていただいており、
そちらでヘッダー透過を試したのですが、同一の症状が見られます。

>もともとご報告の症状は弊社で再現しなかったのですが、

当方で何か特別に変な設定をしたのでしょうか？
追加したCSSは全て無効にしてみたのですが、、、

[石川＠Vektor,Inc.]

確認ありがとうございます。
iPhoneのSafariでご指摘に症状確認いたしました。

調査・修正まで今しばらくお待ちくださいませ。

[uchidaplanning]

たびたび申し訳ございません。
お手数ですが、よろしくお願いします。
こちらでも、過去に行った設定で不備がないか、いろいろと試してみます。

[石川＠Vektor,Inc.]

本件修正作業中で、修正版を週明けにリリース予定ですが、お急ぎの場合は
外観 > カスタマイズ > Lightning ヘッダー設定 の ヘッダー透過設定で、
PCとモバイルの時のヘッダーの高さを指定すると、そちらが優先され、今回不具合を引き起こしている JavaScript ファイルは読み込まれなくなるため動作は安定します。

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

[石川＠Vektor,Inc.]

大変おまたせいたしました。
修正版 0.29.4 をリリースいたしましたのでアップデートしてご確認くださいませ。

ただ、先述の通り、透過に設定する場合はヘッダーの高さを数値で指定いただいた方が表示が安定し、表示速度も速いです。

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

[uchidaplanning]

アップデートして確認し、ズレが修正されていることを確認しました！

お休みの間も対応していただいたようで申し訳ございませんでした。

ありがとうございました。

[投稿者]

投稿