Safari で背景画像が表示されない: ブラウザ固有の難題

レスポンシブ Web デザインの世界では、ブラウザ間で一貫した見た目の美しさを確保します挑戦になる可能性があります。背景画像が Safari に表示されないプロジェクトで作業している場合、イライラすることがあります。

この問題は、クラス「bgMainpage」に背景画像が割り当てられているが、さまざまな環境で Safari でレンダリングに失敗する場合に発生します。 Chrome、Firefox、IE では通常どおり表示されます。この動作は混乱を引き起こし、ユーザビリティに潜在的な懸念を引き起こす可能性があります。

この問題をトラブルシューティングするには、提供されている CSS コードを分析してみましょう:

.bgMainpage {
    background: url("../images/bg.jpg") no-repeat scroll right top #000000;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
}

ただし、CSS コードには明らかな問題はなく、ブラウザー固有のサイズ オーバーラップも適用されています。

徹底的に研究した結果、Safari の潜在的な問題の 1 つが発見されました。つまり、特定の条件が満たされると、特定の種類の jpg/JPEG が表示されなくなります。

これらの条件には次のものが含まれます。

• 形式のコードを使用します
• 画像は背景 (要素または面全体に対する)
• 画像です大（确切大）小不明）

要解决此问题，我们有两个选择：

1. 再新保存画像：确保画像没有採用渐进式格式（フォトショップ
2. 他の形式を使用します。 GIF や PNG などの他の形式を変更します。

これらの修正を適用することで、Safari