Bootstrap と backstretch ( http://srobbin.com/jquery-plugins/backstretch/ ) を使用して、単純な静的 Web サイトを作成しています。さまざまなブラウザーでテストすると、Safari では正しく読み込まれないことがわかりました。これは進行中の作業であるため、コードの一部があまりきれいではないことは理解していますが、コンテンツは他のブラウザーで完全に表示されるため、困惑しています。
通常、これはページの全幅でビューポートの高さの 95% の div をレンダリングします。次に、この div はバックストレッチを使用して画像で埋められます。safari の場合、画像がまったく表示されず、テキストが次の html セットと重なってしまいます。
<div class="row" style=" height:95vh; position: relative;" id="frontpage" >
<div class="col-lg-offset-2 col-lg-8 col-md-offset-2 col-md-8 col-sm-offset-1 col-sm-10 text-center " style="position: absolute; top: 67%;">
<h1 style="color:white; " id="title">
Just Some Title Text </h1>
<h4 style=" color:#D5D5D5; float:none; " id="tagline">
This is my secondary text. </h4>
</div>
</div>
<script> $("#frontpage").backstretch("img/FP2D.jpg");</script>