質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.36%

  • JavaScript

    18718questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    10324questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • WordPress

    8220questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

  • CSS

    6729questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 106

yoshida14

score 3

質問内容

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

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

横にノイズが入った黒い部分が崩れている部分です。他の模様の時もあります。

質問するに至った経緯

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

試したこと

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

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

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

最後に

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

<article class="post" id="post-1">

  <a href="https://example.com">
    <img width="500" height="50" src="https://example.com/1.jpg" alt="">
  </a>

  <div>
    <header class="entry-header">
      <a href="https://example.com">
        <h3 class="title">タイトル</h3>
      </a>
      <div class="entry-meta">
        <span class="author"><a href="https://example.com/admin/">admin</a></span>
      </div>
    </header>

    <a href="https://example.com/">
      <div class="content">
        <p>抜粋文</p>
      </div>
    </a>

    <footer>
      <span class="comment">
        <a href="https://example.com">コメントを送る</a>
      </span>
      <span class="edit">
        <a href="https://example.com">編集</a>
      </span>
    </footer>
  </div>

</article>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • miyabi_takatsuk

    2019/02/10 00:56

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

    キャンセル

  • yoshida14

    2019/02/10 02:15

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

    キャンセル

  • miyabi_takatsuk

    2019/02/10 02:16 編集

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

    キャンセル

回答 3

checkベストアンサー

+1

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

  1. 崩れている画像のbackground-sizeが比率がおかしい上に、リピートがかかっている
  2. 崩れている箇所が、position: absoluteを効かせた上で、z-indexに-値をいれて、下に潜り込ませている。
    safariではうまくいかない配置のさせかたをしている。
  3. position: fixedを使っており、それが悪さをしている。
    主にモバイルで、バグがでると有名ですが、いまだにiOSでは、fixedは不安定な傾向にあります。
    (最新OSではだいぶ改善されてきてはいます)

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/02/11 01:12

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

    キャンセル

0

今回の問題点

・なにもないエリアに謎の模様が現れる
・テキストや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を使用しているのに、分け方が下手くそだったかもしれません。今後はバグを見つけやすいように、分けて記述したいと思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

今回の問題点

・なにもないエリアに謎の模様が現れる
・テキストや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を使用しているのに、分け方が下手くそだったかもしれません。今後はバグを見つけやすいように、分けて記述したいと思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.36%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • JavaScript

    18718questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    10324questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • WordPress

    8220questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

  • CSS

    6729questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。