iPhoneのSafariでのみ、今まで見たことのないCSSの崩れが起こり、困っています。

質問内容

WordPressで自分のテーマを作っており、Safariで動作確認をしたところ、以下のような謎の黒い部分が現れ、表示が崩れてしまいます。

この崩れ（バグ）についてご存知の方、何か思い当たることがある方がいましたら、どんなことでも教えていただきたいです。何卒よろしくお願い申し上げます。

質問するに至った経緯

今までこのような崩れを経験したことがないので、どのような文言で検索していいかも分からず、文字の大きさが変わったり、BOXからはみ出たりといったような崩れ方ではないので全く原因の予想もつかず、ここで質問するに至りました。

試したこと

iOS版Chromeでも確認し、今の所このようなバグは起こっていないため、おそらくSafariの問題かと考えております。当方Macを所持しておらず、MacのSafariで同様の問題が起きるかは確認できておりません。

心当たりとして、CSSのベンダープレフィックスが不十分なところがあったかもしれないですが、これはSafariとChromeの違いでこのような崩れが起きると考えられるでしょうか？

必ず崩れるわけではなく、何度かページを遷移したりすると現れることも多く、全く原因の見当がつきません。

最後に

この画像だけしか用意できなかったのですが、このような崩れ方をご存知の方、予想がつく方がいらっしゃったら、ヒントを教えていただきたいと考えております。よろしくお願い申し上げます。

HTML
1<article class="post" id="post-1">
2
3  <a href="https://example.com">
4    <img width="500" height="50" src="https://example.com/1.jpg" alt="">
5  </a>
6
7  <div>
8    <header class="entry-header">
9      <a href="https://example.com">
10        <h3 class="title">タイトル</h3>
11      </a>
12      <div class="entry-meta">
13        <span class="author"><a href="https://example.com/admin/">admin</a></span>
14      </div>
15    </header>
16
17    <a href="https://example.com/">
18      <div class="content">
19        <p>抜粋文</p>
20      </div>
21    </a>
22
23    <footer>
24      <span class="comment">
25        <a href="https://example.com">コメントを送る</a>
26      </span>
27      <span class="edit">
28        <a href="https://example.com">編集</a>
29      </span>
30    </footer>
31  </div>
32
33</article>

miyabi_pudding

2019/02/09 15:56

対象のHTMLとCSS、JavaScriptも使っているのであれば、含め、ソースコードを記載してください。見た目だけでは、回答はできません。

yoshida14

2019/02/09 17:15

CSSやJavascriptはいろいろなファイルに分けていて、すぐに整理ができないので、HTMLを追記しました。この画像やHTMLで分かることがありましたら、回答いただけると幸いです。

miyabi_pudding

2019/02/09 17:18 編集

HTMLだけでは、100%このような表示にはなりません。 CSSは100%関係しているので、使用しているCSSコードも記載していただかないと、回答しかねるかと思いますが、そのような状況なら、予測で回答させていただきます。

行動規範の内容に同意します

回答3件

今回の問題点

・なにもないエリアに謎の模様が現れる
・テキストや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でした。

SCSS
1//背景画像だけをぼかすCSS
2&::before{
3        content: '';
4        position: absolute;
5        top: -5px;
6        bottom: -5px;
7        left: -5px;
8        right: -5px;
9        background: inherit;
10        -webkit-filter: brightness(0.4) blur(5px);
11        filter: brightness(0.4) blur(5px);
12}

SCSS
1// アニメーション
2@media (max-width: 900px){
3    //コンテンツエリア
4    .content-area{
5        filter: opacity(0);
6        animation-name: anime;
7        animation-duration: 1s;
8        animation-delay: 1s;
9        animation-fill-mode: forwards;
10    }
11}

どちらも、具体的に何がいけなかったのかが理解できていないのですが、他のCSSと相性がよくないのかもしれません。今のところは、これをコメントアウトすることで、崩れること無く表示できています。

最後に

助言をいただき、ありがとうございました。
調べても同じような状況は見つからなかったので、私のCSSが汚いのが原因である可能性が高いです。
せっかくSCSSを使用しているのに、分け方が下手くそだったかもしれません。今後はバグを見つけやすいように、分けて記述したいと思います。

投稿2019/02/10 16:40

yoshida14

総合スコア17

ベストアンサー

CSSの記載がすぐにできないということで、
完全に予測の範疇を超えず、
問題解決にはならないかと思いますが、
下記の見直しをしてみてください。
（ほぼほぼCSSの見直しです）

崩れている画像のbackground-sizeが比率がおかしい上に、リピートがかかっている
崩れている箇所が、position: absoluteを効かせた上で、z-indexに-値をいれて、下に潜り込ませている。

safariではうまくいかない配置のさせかたをしている。
0. position: fixedを使っており、それが悪さをしている。
主にモバイルで、バグがでると有名ですが、いまだにiOSでは、fixedは不安定な傾向にあります。
（最新OSではだいぶ改善されてきてはいます）

とにかく、CSSを記載していただかないと、全く状況がつかめないので、
CSSを記載して頂かない限り、これ以上の回答はできません。

投稿2019/02/09 17:30

miyabi_pudding

総合スコア9528

yoshida14

2019/02/10 16:12

この少ない情報で回答いただきありがとうございます。確実にCSSが原因であるという助言を頂き、原因特定に向けての方向性が定まり非常に助かりました。今の所はなんとか解決できたかと思いますので、解決法と原因を残しておきます。この度は誠にありがとうございました。

行動規範の内容に同意します

今回の問題点

・なにもないエリアに謎の模様が現れる
・テキストやDIVが複製されたように表示が崩れる

バグの発生条件、確認方法

原因の特定方法

確実にCSSが原因で崩れているとの助言をいただいたので、CSSを徐々に解除していき、どの時点で問題が発生するかを調べました。

原因の発生しているSCSSファイルを特定する

まずはCSS全てを解除→ヘッダー(_header.scss)を解除→フッター(_footer.scss)を解除→コンテンツ部分(_content.scss)を解除

私の場合はコンテンツ部分を解除したところで、実機でのバグが治まりました。そのため、コンテンツ部分の何らかのCSSが原因と特定できました。

原因の発生している行を特定する

次はコンテンツ部分のSCSS(_content.scss)のどの行が問題かを特定しました。

結局何が問題だったのか

今回、表示の崩れを起こしていた原因は、以下のCSSでした。

SCSS
1//背景画像だけをぼかすCSS
2&::before{
3        content: '';
4        position: absolute;
5        top: -5px;
6        bottom: -5px;
7        left: -5px;
8        right: -5px;
9        background: inherit;
10        -webkit-filter: brightness(0.4) blur(5px);
11        filter: brightness(0.4) blur(5px);
12}

SCSS
1// アニメーション
2@media (max-width: 900px){
3    //コンテンツエリア
4    .content-area{
5        filter: opacity(0);
6        animation-name: anime;
7        animation-duration: 1s;
8        animation-delay: 1s;
9        animation-fill-mode: forwards;
10    }
11}