0

I am using Bootstrap and backstretch (http://srobbin.com/jquery-plugins/backstretch/) to put together a simple static website. When testing it on different browsers, I am finding it does not load properly on Safari. I understand that some of my code is not very clean, since this is a work in progress, but the content displays perfectly on other browsers so I am stumped.

Normally, this renders a div that is the full width of the page, and 95% of the viewport height. Then, this div is filled by an image using backstretch. In safari's case, the image is not shown at all and the text overlaps with the next set of 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>
Sean
  • 1
  • 1
  • 1
    Please include the relevant parts of your code here as the question depends on them and when the linked site changes the question becomes less useful for future readers. – Jason Aller Jul 03 '14 at 21:22
  • I added the relevant pieces of code above. Thanks for the help. – Sean Jul 03 '14 at 21:40
  • You also might want to explain or show what Safari is doing different than the other browsers. The information provided need to explain more of the problem in my opinion. – Hoshts Jul 03 '14 at 22:39
  • Does the explanation I have added help? – Sean Jul 03 '14 at 23:01

1 Answers1

0

thanks to anyone that took a look and tried to find an answer. Turns out the safari I was using was 5.1.7, which is seriously deprecated. Therefore, the differences in render are completely understandable.

Sean
  • 1
  • 1