- このトピックには2件の返信、2人の参加者があり、最後に
により3年、 12ヶ月前に更新されました。
-
投稿
-
【お使いの Snow Monkey のバージョン】不明
【お使いのブラウザ】Safari for iOS
【当該サイトのURL】demo.waiwai-do.com などで見られる
===
他人のサイトなので、詳細はデモサイト作った人に聞いてください。当該サイトの例であれば、お知らせバーにある「こちらのサイトは、do_action Japan 2020用デモサイトです。」の
do_action Japan 2020と言う単語のワードラップの計算が原因なんですかね？
お知らせバーとヘッダー間のマージン（またはパディング）が大きく余白が開く症状になる場合があります。
MacのSafariを横幅かなり小さめにするかiPhoneで見た場合ですね。Safari独自の折り返し問題が起因していると思われます。解決案：
当該サイトであれば、このテキスト領域に対して、word-wrapを入れたら解決すると思われる。別件のようだが本問題にも関連していると思われる不具合：
メニュー内に長い英単語を入れたりロゴを比率が適当なSVGにしたりした場合でもお知らせバーあたりの表示位置がぶっ壊れて表示される場合がある。
毎回起こらない＆メニューがホバーされると表示位置が変動して正しくなる。
そちらの解決方法は不明（原因も不明）そちらもSafariのみ発生する様子。いいねをした人: 居ませんこれ多分 autoptimize プラグインで CSS を preload させてるからじゃないですかねー。ヘッダーに CSS が適用されない、長い状態の段階で高さを取得して
margin-topとして設定するからだと思います。テストサイトのお知らせバーのに、このデモサイトのお知らせバーと同じ文字列を入れてみましたが、特に問題は発生しなかったので、preload をやめてもらうしか方法がない気がする…。
いいねをした人: 居ませんなるほど。
再現しているテスト環境で同じようなプラグインを入れてやると１００％起こるようになるのでCSSなどの問題って感じなんですねー。こちらで再現させているのは4G時に起こっているので、CSSの読み込みが重くてできない場合でも起こってるだけって事なのか…良く解らないですが。CSSの読み込みでの問題って事で確かにどうしようもない。うーむ…。
キャッシュ系をしていない場合でも起こるメニュー系の問題の方は、同じくSVGやcalc計算などの読み込みからの表示領域計算で起こる問題なのか、リソースなどの読み込みで表示ロックしちまっているだけかもしれませんが。4Gで見るのが多い客サイトなので、何かCSS軽減の対策も別に考えてみるとします。
トピック閉じます。いいねをした人: 居ません
- トピック「お知らせバーが自然と２行になってしまう場合、コンテンツ領域がずれてしまう」には新しい返信をつけることはできません。