safariで開くと、画像がバグります。

Question

前提・実現したいこと

こんにちは。コーディングしたサイトをsafariで開いたところ、パソコン上のレスポンシブでは問題ありませんでしたが、iPhoneで見ると、画像がバグっていました。

発生している問題・エラーメッセージ

どなたか、ご教示いただければ幸いです。

該当のソースコード

   <li id="skill" class="container">
            <div id="fontawesome" class="mark">
                <img class="skillimg" src="img/Skill.gif">
                <ul class="skillbox">
                    <li class="flexbox fadein-act">
                        <h2>HP・LP制作</h2>
                        <div class="resflex">
                            <img src="img/制作.jpg">
                            <p>ここに文章</p>
                        </div>
                    </li>

                    <li class="flexbox fadein-act">
                        <h2>WordPress</h2>
                        <div class="resflex">
                            <img src="img/WordPress.jpg">
                            <p>ここに文章</p>
                        </div>
                    </li>
                    <li class="flexbox fadein-act">
                        <h2>レスポンシブ</h2>
                        <div class="resflex">
                            <img src="img/レスポンシブ.jpg">
                            <p>ここに文章</p>
                        </div>
                    </li>
                </ul>
            </div>
        </li>

.mark img{
  margin: 0 auto;
}
# skill{
  margin:50px;
  display: block;
}
.skillbox{
  display: flex;
}
.flexbox{
  margin:0;
  padding:10px;
  width:30%;
  text-align: center;
  position: relative;
  }
  .flexbox p{ 
   padding-top:30px;
   text-align: left;
  }
.flexbox img{
  width:250px;
  height: 250px;
border-radius: 50%;
margin: 0 auto;
}

Comments

[kai0310]

表示結果をみただけで、原因はわかりません。

該当部分のコードの提示をしてください。
> safariで開くと、画像がバグります。
では、同iPhoneからブラウザを変えて行ったのですか？ただ、レスポンシブに変えてないだけでバグでもなく指定したまま表示されている様に思えます。

[kaputaros]

コーディングしたコードを記載してください。

[Lhankor_Mhy]

ソースコードを書きましょう
https://teratail.com/help/question-tips#questionTips3-5-1

期待した処理結果を書きましょう
https://teratail.com/help/question-tips#questionTips3-4-3

3-3. 質問詳細の最初に実現したいことを書きましょう
https://teratail.com/help/question-tips#questionTips3-3

[T012]

ご返信ありがとうございます。
コードを追記しました。
ご確認いただければ幸いです。

[Lhankor_Mhy]

期待する結果はどのようなものですか？

[T012]

画像が横に3つ並ぶイメージです。

[kai0310]

ざっと見ましたが、レスポンシブの問題の可能性が高いかと思います。

バグではない可能性は高いです。。。

[kai0310]

繰り返します。
> では、同iPhoneからブラウザを変えて行ったのですか？

[Lhankor_Mhy]

横スクロールバーを出したい、ということですか？

[Lhankor_Mhy]

スクリーンショットのナビゲーションドットのようなものが気になります。
もしかして、実際のページではスライダープラグインとかを使っていないでしょうか？

[T012]

パソコン上では、レスポンシブ対応は問題なく画像が出ているのですが、iPhoneで開いてみるとこのようになってしまします。

[T012]

おっしゃる通り、ページにはSlickを使用しています。

[Lhankor_Mhy]

開発者ツールのモバイルモードでは問題がない、ということですか？

[T012]

その通りです。
パソコン上のレスポンシブは、パソコン画面、iPad,iphonexなどのサイズに対応できるようになっています。
safariで開いたのが原因ではないかと、今調べています。

[Lhankor_Mhy]

#skill が一枚のスライダー、という構成ですか？

ちょっと、実物を見ないと何とも言えなそうな気がしています。

[dit.]

（1つ前の質問の修正依頼欄からTwitterを拝見し、スライダーの中の1コンテンツとして画像3枚が横並びになっている部分を確認しました。）

Answer 1

どのような状態を「画像がバグる」と言っているのかわからないですが、気になった部分を挙げておきます。

１．ファイル名に日本語を使っている
画像が正常に表示されない等問題が出ることが多いです。
ちょっと古い記事ですが参考までhttps://www.attend.jp/update_170810

２．#の後の空白
指定したもの効いてないのでは？

# skill{
  margin:50px;
  display: block;
}

３．幅と高さを指定しているので画面からはみ出している可能性
メディアクエリーとかで何かしら指定してるとしたらこの質問からは読み取れませんが

.flexbox img{
  width:250px; /* これと */
  height: 250px; /* これ */
border-radius: 50%;
margin: 0 auto;
}

Comments

[T012]

ご返信ありがとうございます。ファイル名がいくつか日本語表記のままだったので、そこは英語に直しました。
それで再度アップロードしたのですが、まだ変わらなかったです。

[dit.]

念のためキャッシュクリア等もお試しください。
質問に提示されていないコードが影響している可能性もあるため、できる限りの情報を提示してください。（コードをすべて提示することが難しくても、「このプラグインを使っている」みたいな情報はあった方がいいと思います）
また、実機のキャプチャだけでなく「パソコン（管理者ツール等のモバイルモード）で見た時の問題のない状態」のスクリーンショット等を提示すると、理想の状態が判断しやすくなります。

[dit.]

修正依頼欄にも書きましたがPCでの表示を確認したところスライダー自体は関係なさそうですね。
画像そのものは表示されるのか、表示されるがサイズが想定と違うのか等をお答えいただきたいと思います。

[T012]

キャッシュクリアにして見ると、正しくなっていました！ありがとうございます！