title: Bootstrap Carousel Item background image is not showing in Safari
body: <p>I'm developing a wordpress site using bootstrap. I have a carousel which is set to 100vh. This displays correctly in all browsers apart from safari. below is the code.</p>
  
  <p>Below is the relvant css code: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(function( $ ) {
  
   //Function to animate slider captions 
   function doAnimations( elems ) {
    //Cache the animationend event in a variable
    var animEndEv = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
    
    elems.each(function () {
     var $this = $(this),
      $animationType = $this.data('animation');
     $this.addClass($animationType).one(animEndEv, function () {
      $this.removeClass($animationType);
     });
    });
   }
   
   //Variables on page load 
   var $myCarousel = $('#carousel-example-generic'),
    $firstAnimatingElems = $myCarousel.find('.item:first').find("[data-animation ^= 'animated']");
    
   //Initialize carousel 
   $myCarousel.carousel();
   
   //Animate captions in first slide on page load 
   doAnimations($firstAnimatingElems);
   
   //Pause carousel  
   &lt;!--$myCarousel.carousel('pause');--&gt;
  
   
   //Other slides to be animated on carousel slide event 
   $myCarousel.on('slide.bs.carousel', function (e) {
    var $animatingElems = $(e.relatedTarget).find("[data-animation ^= 'animated']");
    doAnimations($animatingElems);
   });  
   
  })(jQuery);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.fill {
      width: 100%;
      height: 100vh;
   -webkit-height:1000px;
      background-position: center;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      background-size: 100% 100%;
      -o-background-size: cover;
  
  }
  
  #mycarousel {
   max-height: 100vh;
  }
  .carousel,
  .item,
  .active {
   padding-top:0;
      height: 100%;
      z-index:2;
  }
  .carousel h1 {
   font-size: 50px;
  }
  .carousel h2 {
      font-size: 2.5em;
      box-shadow: none;
      padding: 2%;
   text-shadow: none;
   font-weight: 500; 
  }
  .carousel h3 {
      font-size: 1.2em;
      box-shadow: none;
      padding: 2%;
      margin-top: 10px;
   text-shadow: none;
   font-weight: 300; 
  }
  .carousel-inner {
      /*height: 100%;*/
     height:calc(100vh - 115px); 
   margin:0 auto;
  }
  .carousel-caption {
   position: absolute;
     right: 37%;
     bottom: 20px;
     left: 37%;
    bottom: 40%;
   margin-right:auto;
   margin-left: auto;
   max-width: 26%;
   min-height: 5%;
    color: #caaa77;
   font-size: 1.2em;
   background-color:rgba(255, 255, 255, 1.0);
   padding: 5px 20px;
   text-align:center;
  /* border: 5px solid #caaa77;*/
   animation-delay: 0.5s;
    -webkit-animation-delay: 0.2s;
       -moz-animation-delay: 0.2s;
         -o-animation-delay: 0.2s;
      -moz-transition: none !important;
  }
  .carousel-caption p {
      color: #1d2532;
      padding: 2% 20%;
      text-shadow: none;
      font-style: italic;
  }
  .carousel-caption p a {
   text-decoration: none;
   color: #1d2532; 
  }
  .carousel-indicators {
   bottom: 30%;
  }
  .carousel.fade {
    opacity: 1;
  }
  .carousel.fade .item {
    transition: opacity ease-out linear 1.7s;
    left: 0;
    opacity: 0; /* hide all slides */
    top: 0;
    position: absolute;
    width: 100%;
    display: block;
  }
  .carousel.fade .item:first-child {
    top: auto;
    /*opacity: 1; /* show first slide */
    position: relative;
  }
  .carousel.fade .item.active {
    opacity: 1;
  }
  .carousel.icon-prev {
      background-color: #FFF;
      padding: 10px 8px;
      position: absolute;
      margin-left: -95px;
      top: 45%;
      z-index: 5;
      display: inline-block;
  }
  .carousel.icon-next {
      background-color: #FFF;
      padding: 10px 8px;
      position: absolute;
      margin-left: 67px;
      top: 45%;
      z-index: 5;
      display: inline-block;
  }
  .side-controls-block {
      position: absolute;
      bottom: 0;
      right: 30px;
      /*top: 10px;*/
      display: block;
      width: 80px;
      margin: 0 auto;
      z-index: 2;
      height: 24px;
      text-align: center;
  }
  .side-controls-block div {
    display: inline-block;
    vertical-align: middle;
    z-index: 1;
  }
  
  .side-controls-block a {
    display: inline-block;
    border-radius: 50%;
  }
  .side-controls-block a:hover {
   color:#1d2532; 
  }
   
  .side-controls-block.chev-left a:hover {
    border: 0.1em solid #1d2532;
  }
  
  .side-controls-block a:hover.chev-left:after, a:hover .right:after a:hover:down {
    border-top: 0.1em solid #caaa77;
    border-right: 0.1em solid #caaa77;
  }
  
  .side-controls-block.chev-left {
    display: inline-block;
    width: 3em;
    height: 3em;
    border: 0.1em solid #caaa77;
    border-radius: 50%;
    margin-right: 1.5em;
  }
  .side-controls-block.chev-left:after {
    content: '';
   display: inline-block;
    margin-top: 0.7em;
    margin-left: 0.6em;
    width: 1.4em;
    height: 1.4em;
    border-top: 0.1em solid #caaa77;
    border-right: 0.1em solid #caaa77;
    -moz-transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
  }
  .side-controls-block.chev-right {
    display: inline-block;
    width: 3em;
    height: 3em;
    border: 0.1em solid #caaa77;
    border-radius: 50%;
    margin-left: 1.5em;
  }
  
  .side-controls-block.chev-right:after {
    content: '';
    display: inline-block;
    margin-top: 0.7em;
    margin-left: -0.6em;
    width: 1.4em;
    height: 1.4em;
    border-top: 0.1em solid #caaa77;
    border-right: 0.1em solid #caaa77;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .down-controls-block {
      position: absolute;
      bottom: 30px;
      /*top: 10px;*/
      display: block;
      width: 100%;
      margin: 0 auto;
      z-index: 2;
      height: 24px;
      text-align: center;
  }
  .down-controls.chev-down {
    display: inline-block;
    width: 3em;
    height: 3em;
    margin-left: 1.5em;
  }
  
  .down-controls.chev-down:after {
    content: '';
    display: inline-block;
    margin-top: 0.7em;
    margin-left: -0.6em;
    width: 1.4em;
    height: 1.4em;
    border-top: 0.1em solid #caaa77;
    border-right: 0.1em solid #caaa77;
    -moz-transform: rotate(120deg);
    -webkit-transform: rotate(120deg);
    transform: rotate(120deg);
  }
  .carousel-control {
      position: absolute;
      bottom: 30px;
      /*top: 10px;*/
      display: block;
   z-index: 2;
  }
  
  .carousel-control .icon-prev,
  .carousel-control .icon-next,
  .carousel-control .glyphicon-chevron-left,
  .carousel-control .glyphicon-chevron-right {
    position: absolute;
    top: 60%;
    z-index: 3;
    display: inline-block;
    margin-top: -10px;
  }
  .carousel-image {
     background-repeat: no-repeat;
      background-position: center top;
      background-attachment: fixed;
      background-size: cover;
  }
  
   Here is the carousel code from the page itself:</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;header id="carousel-example-generic" class="carousel" data-interval="10000" data-pause="false"&gt;
          &lt;!-- Indicators --&gt;
          &lt;!-- Indicators --&gt;
          &lt;ol class="carousel-indicators"&gt;
              &lt;li data-target="#carousel-example-generic" data-slide-to="0" class="active"&gt;&lt;/li&gt;
              &lt;li data-target="#carousel-example-generic" data-slide-to="1"&gt;&lt;/li&gt;
              &lt;li data-target="#carousel-example-generic" data-slide-to="2"&gt;&lt;/li&gt;
              &lt;li data-target="#carousel-example-generic" data-slide-to="3"&gt;&lt;/li&gt;            
          &lt;/ol&gt;
  
          
  
          &lt;!-- Wrapper for Slides --&gt;
          &lt;div class="carousel-inner"&gt;
              &lt;div class=" item active"&gt;
                  &lt;!-- Set the first background image using inline CSS below. --&gt;             
              &lt;div class=" fill animated kenburns-top carousel-image" style="background-image:url('&lt;?php the_field('carousel_grid_image_1');?&gt;')"&gt;&lt;/div&gt;
                  &lt;div data-animation="animated fade-in-auto one" class="carousel-caption"&gt;
                      &lt;img&gt;  
                      &lt;h3 data-animation="animated fade-in-auto one"&gt;
                        &lt;?php the_field('carousel_title_1'); ?&gt;
                      &lt;/h3&gt;
                      &lt;p data-animation="animated fade-in-auto one"&gt;
                      &lt;a href="&lt;?php the_field('carousel_link_1'); ?&gt;"&gt;&lt;?php the_field('carousel_subtitle_1'); ?&gt;&lt;/a&gt; 
                      &lt;/p&gt;              
                  &lt;/div&gt;
              &lt;/div&gt;
     &lt;div class="item"&gt;
                  &lt;!-- Set the second background image using inline CSS below. --&gt;
              &lt;div class="fill animated kenburns-top" style="background-image:url('&lt;?php the_field('carousel_grid_image_2'); ?&gt;');"&gt;&lt;/div&gt;
                  &lt;div data-animation="animated fade-in-auto one" class="carousel-caption"&gt;
                      &lt;img&gt;  
                      &lt;h3 data-animation="animated fade-in-auto one"&gt;
                        &lt;?php the_field('carousel_title_2'); ?&gt;
                      &lt;/h3&gt;
                      &lt;p data-animation="animated fade-in-auto one"&gt;
                          &lt;a href="&lt;?php the_field('carousel_link_2'); ?&gt;"&gt;&lt;?php the_field('carousel_subtitle_2'); ?&gt;&lt;/a&gt;
                      &lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
     &lt;div class="item"&gt;
                  &lt;!-- Set the third background image using inline CSS below. --&gt;
              &lt;div class="fill animated kenburns-top" style="background-image:url('&lt;?php the_field('carousel_grid_image_3'); ?&gt;');"&gt;&lt;/div&gt;
                  &lt;div data-animation="animated fade-in-auto one" class="carousel-caption"&gt;
      &lt;img&gt;  
                      &lt;h3 data-animation="animated fade-in-auto one"&gt;
                        &lt;?php the_field('carousel_title_3'); ?&gt;
                      &lt;/h3&gt;
                      &lt;p data-animation="animated fade-in-auto one"&gt;
                        &lt;a href="&lt;?php the_field('carousel_link_3'); ?&gt;"&gt;&lt;?php the_field('carousel_subtitle_3'); ?&gt;&lt;/a&gt;
                      &lt;/p&gt;              
                  &lt;/div&gt;
              &lt;/div&gt;
     &lt;div class="item"&gt;
                  &lt;!-- Set the third background image using inline CSS below. --&gt;
              &lt;div class="fill animated kenburns-top" style="background-image:url('&lt;?php the_field('carousel_grid_image_4'); ?&gt;');"&gt;&lt;/div&gt;
                  &lt;div data-animation="animated fade-in-auto one" class="carousel-caption"&gt;
      &lt;img&gt;
                      &lt;h3 data-animation="animated fade-in-auto one"&gt;
                        &lt;?php the_field('carousel_title_4'); ?&gt;
                      &lt;/h3&gt;
                      &lt;p data-animation="animated fade-in-auto one"&gt;
                      &lt;a href="&lt;?php the_field('carousel_link_1'); ?&gt;"&gt;&lt;?php the_field('carousel_subtitle_4'); ?&gt;&lt;/a&gt; 
                      &lt;/p&gt;           
                &lt;/div&gt;
              &lt;/div&gt;&lt;!-- /.item --&gt;
              
      
            &lt;/div&gt;&lt;!-- /.carousel-inner --&gt;
      
          &lt;/div&gt;&lt;!-- /.carousel --&gt;
          &lt;!-- Controls --&gt;
          &lt;div class="side-controls-block"&gt;
            &lt;div class="controls"&gt; 
              &lt;a class="left carousel-control animated fade-in-auto one" href="#carousel-example-generic" role="button" data-slide="prev"&gt;
                      &lt;span class="side-controls-block chev-left"&gt;&lt;/span&gt;
              &lt;/a&gt;
          
              &lt;a class="right carousel-control animated fade-in-auto one" href="#carousel-example-generic" role="button" data-slide="next"&gt;
                     &lt;span class="side-controls-block chev-right"&gt;&lt;/span&gt;
              &lt;/a&gt;
      &lt;/div&gt;&lt;!--/.controls --&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>If I change the .fill css so that height:300px; instead of height:100vh; it displays.</p>
  
  <p>Does anyone know where I'm going wrong?</p>