title: Absolutely positioned content of flexlider slides, disappear on mobile iOS safari and chrome and desktop safari, but not on desktop
body: <p>I am using flexslider but i don't necessarily know if this is a flexslider problem or just to do with how I have positioned the contents of each slide.
  Basically, I have a left block of text, and a right hand side image on each slide... when this responds to mobile devices, I stack them vertically using absolute positioning. 
  This seems to work file when previewed on desktop, however when I load it on my iphone, or on Safari, the contents of each slide disappear.</p>
  
  <p>I cant for the life of me figure out why this is, as it seems fine on chrome.</p>
  
  <p>To view the site, click below: </p>
  
  <p><a href="http://toddpadwick.co.uk/main-index.html" rel="nofollow">toddpadwick.co.uk/main-index.html</a></p>
  
  <p>Can any one help? im really struggling here!</p>
  
  <p>the contents of each slide are as follows: (i have simplified it for the purpose of this post)</p>
  
  <pre><code>&lt;ul class="slides"&gt;
      &lt;li&gt;&lt;!-- slide--&gt;
          &lt;div class="caption"&gt;&lt;!-- THIS IS THE LEFT SIDE TEXT BOX --&gt;
              &lt;div class="title"&gt;
                  lorum ipsum dolar sit amet
              &lt;/div&gt;&lt;!-- END TITLE --&gt;
          &lt;/div&gt;&lt;!-- END CAPTION --&gt;
  
          &lt;div class="teaser"&gt;&lt;!-- THIS IS THE RIGHT HAND SIDE IMAGE --&gt;
              &lt;div class="image" style="background-image:url(teasers/image.png);"&gt;&lt;/div&gt;
          &lt;/div&gt;&lt;!-- END TEASER --&gt;
      &lt;/li&gt;&lt;!-- end slide--&gt;
  &lt;/ul&gt;&lt;!-- END SLIDES--&gt;
  </code></pre>
  
  <p>and here is CSS </p>
  
  <pre><code>.flexslider .slides, .flexslider .slides &gt; li {
      height: 100%;
  }
  
  .flexslider .slides li {
      height:100%;
      position: relative;
  }
  
  
  
  
  .slides li .caption {
      -webkit-transition: all 0.3s ease-out 0.7s;
      transition:all 0.3s ease-out 0.7s;
      height:100%;
      left:0;
      width:40%;
      opacity:0.4;
      display: table;
      float: left;
  }
  
  
  .slides li.flex-active-slide .caption {
      opacity:1;
  }
  
  .slides li .caption .title {
      vertical-align: middle;
      display: table-cell;
      width: 100%;
      padding-left:100px;
  }
  
  
  .slides li .teaser {
      -webkit-transition: all 0.3s ease-in 0.6s;
      transition:all 0.3s ease-in 0.6s;
      width:60%;
      height:90%;
      right:0;
      top:0;
      display:table;
      padding:20px 60px 40px 20px;
      position: absolute;
  
  }
  
  .slides li .teaser .image {
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      display: table-cell;
      vertical-align: middle;
  }
  </code></pre>
  
  <p><a href="http://toddpadwick.co.uk/main-index.html" rel="nofollow">toddpadwick.co.uk/main-index.html</a></p>