title: Some bootstrap carousel images not loading on safari mac
body: <p>This is a Wordpress site, and I am loading jQuery 1.9.1 and Bootstrap 3.3.5 from CDN. (I am loading jQuery before Bootstrap JS) I have five images in the carousel but the 2nd, 4th and 5th images aren't showing in Safari for Mac.</p>
  
  <p>One of the answers <a href="https://stackoverflow.com/questions/13224156/why-is-the-carousel-from-twitter-bootstrap-not-working-for-me">here</a> seems to encounter the same issue but his fix was updating Bootstrap and I am using the latest one as of the moment but still, it won't display.</p>
  
  <p>Here's my markup if it helps. I am also using the fade effect instead of slide but even if remove it, the slider doesn't display the images too.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;header id="myCarousel" class="carousel slide carousel-fade"&gt;
      &lt;div class="carousel-caption"&gt;
          &lt;!-- overlay caption for all images --&gt;
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
      &lt;/div&gt;
  
      &lt;div class="carousel-inner"&gt;
  
          &lt;div class="item active"&gt;
              &lt;div class="fill" style="background-image:url('/img/slider_1.jpg')"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;
              &lt;div class="fill" style="background-image:url('/img/slider_2.jpg')"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;
              &lt;div class="fill" style="background-image:url('/img/slider_3.jpg')"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;
              &lt;div class="fill" style="background-image:url('/img/slider_4.jpg')"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;
              &lt;div class="fill" style="background-image:url('/img/slider_5.jpg')"&gt;&lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;a class="left carousel-control" href="#myCarousel" data-slide="prev"&gt;
          &lt;img class="btn-back" src="/img/carousel/btn_back.png"&gt;
      &lt;/a&gt;
      &lt;a class="right carousel-control" href="#myCarousel" data-slide="next"&gt;
          &lt;img class="btn-next" src="/img/carousel/btn_next.png"&gt;
      &lt;/a&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>Has anyone had the same problem? Would appreciate any help, thanks</p>