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

[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.]

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

[投稿者]

投稿