質問: ### 質問内容 WordPressで自分のテーマを作っており、Safariで動作確認をしたところ、以下のような謎の黒い部分が現れ、表示が崩れてしまいます。 この崩れ(バグ)についてご存知の方、何か思い当たることがある方がいましたら、どんなことでも教えていただきたいです。何卒よろしくお願い申し上げます。 ![横にノイズが入った黒い部分が崩れている部分です。他の模様の時もあります。](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/7776be227e0bbe77892ccf3de3720d6a.jpeg) ### 質問するに至った経緯 今までこのような崩れを経験したことがないので、どのような文言で検索していいかも分からず、文字の大きさが変わったり、BOXからはみ出たりといったような崩れ方ではないので全く原因の予想もつかず、ここで質問するに至りました。 ### 試したこと iOS版Chromeでも確認し、今の所このようなバグは起こっていないため、おそらくSafariの問題かと考えております。当方Macを所持しておらず、MacのSafariで同様の問題が起きるかは確認できておりません。 心当たりとして、CSSのベンダープレフィックスが不十分なところがあったかもしれないですが、これはSafariとChromeの違いでこのような崩れが起きると考えられるでしょうか? 必ず崩れるわけではなく、何度かページを遷移したりすると現れることも多く、全く原因の見当がつきません。 ### 最後に この画像だけしか用意できなかったのですが、このような崩れ方をご存知の方、予想がつく方がいらっしゃったら、ヒントを教えていただきたいと考えております。よろしくお願い申し上げます。 ``` タイトル admin 抜粋文 コメントを送る 編集 ```
回答: ### 今回の問題点 ・なにもないエリアに謎の模様が現れる ・テキストやDIVが複製されたように表示が崩れる このように、単に文字がボックスをはみ出る、画像が見えたり消えたりするといったような崩れ方ではなく、液晶が壊れたような、原因がわからないようなバグが発生していました。 ### バグの発生条件、確認方法 使用機器:iPhoneX iOS12 Safariでサイトを開き、一度端末をロックする→ロックを解除して、ピンチでゆっくりと拡大する (ロックしなくてもバグは発生しますが、少しの間放置しないとピンチで拡大してもバグが発生しなかったです。) ### 原因の特定方法 確実にCSSが原因で崩れているとの助言をいただいたので、CSSを徐々に解除していき、どの時点で問題が発生するかを調べました。 ### 原因の発生しているSCSSファイルを特定する まずはCSS全てを解除→ヘッダー(_header.scss)を解除→フッター(_footer.scss)を解除→コンテンツ部分(_content.scss)を解除 私の場合はコンテンツ部分を解除したところで、実機でのバグが治まりました。そのため、コンテンツ部分の何らかのCSSが原因と特定できました。 ### 原因の発生している行を特定する 次はコンテンツ部分のSCSS(_content.scss)のどの行が問題かを特定しました。 _content.scssの約600行のうち、1行目から300行分を削除して実機を確認 →バグが治らなければ1行目から450行分を削除して実機を確認という風に、半分ずつに絞り込んで問題部分を特定しました。 →バグが治れば、1行目から150行分を削除・・・ ### 結局何が問題だったのか 今回、表示の崩れを起こしていた原因は、以下のCSSでした。 ``` //背景画像だけをぼかすCSS &::before{ content: ''; position: absolute; top: -5px; bottom: -5px; left: -5px; right: -5px; background: inherit; -webkit-filter: brightness(0.4) blur(5px); filter: brightness(0.4) blur(5px); } ``` ``` // アニメーション @media (max-width: 900px){ //コンテンツエリア .content-area{ filter: opacity(0); animation-name: anime; animation-duration: 1s; animation-delay: 1s; animation-fill-mode: forwards; } } ``` どちらも、具体的に何がいけなかったのかが理解できていないのですが、他のCSSと相性がよくないのかもしれません。今のところは、これをコメントアウトすることで、崩れること無く表示できています。 ### 最後に 助言をいただき、ありがとうございました。 調べても同じような状況は見つからなかったので、私のCSSが汚いのが原因である可能性が高いです。 せっかくSCSSを使用しているのに、分け方が下手くそだったかもしれません。今後はバグを見つけやすいように、分けて記述したいと思います。