title: Text duplicates on iPad3
body: <p>I have the strangest problem. My clients claims that text on a web page... duplicates itself on iPad 3. It's simple <code>&lt;p&gt;</code> (also tried <code>&lt;small&gt;</code>, <code>&lt;h5&gt;</code> etc).</p>
  
  <p>Code looks like that:</p>
  
  <pre><code>&lt;section id="slider"&gt;
      &lt;nav class="hide-mobile"&gt;&lt;a class="left slider-prev" href=""&gt;&lt;i class="icon-left-open"&gt;&lt;/i&gt;&lt;/a&gt;&lt;a class="right slider-next" href=""&gt;&lt;i class="icon-right-open"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/nav&gt;
      &lt;ul class="cycle-slideshow" data-cycle-slides="&gt; li" data-cycle-fx="scrollHorz" data-cycle-prev=".slider-prev" data-cycle-swipe="true" data-cycle-speed="500" data-cycle-timeout="2500" data-cycle-next=".slider-next" data-cycle-pause-on-hover="true" data-cycle-youtube="true"&gt;
              &lt;li style="background-image: url('http://192.168.1.69/red/wp-content/uploads/2014/02/slide-1024x526.jpg')"&gt;
              &lt;div class="container"&gt;
                                      &lt;div class="row"&gt;&lt;h2&gt;Slide title #2&lt;/h2&gt;&lt;/div&gt;
                      &lt;div class="row"&gt;&lt;div class="video"&gt;&lt;iframe width="420" height="315" src="//www.youtube.com/embed/d2pz7v4V-Qk" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;&lt;/div&gt;&lt;/div&gt;
                              &lt;/div&gt;
          &lt;/li&gt;
              &lt;li style="background-image: url('http://192.168.1.69/red/wp-content/uploads/2014/02/slide-1024x526.jpg')"&gt;
              &lt;div class="container"&gt;
                                      &lt;div class="row"&gt;&lt;h2&gt;Slide title #1&lt;/h2&gt;&lt;/div&gt;
                      &lt;div class="row"&gt;&lt;p&gt;Smple description&lt;/p&gt;&lt;/div&gt;
                              &lt;/div&gt;
          &lt;/li&gt;
          &lt;/ul&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>#slider {
    border-bottom: 3px solid #ae0000;
    position: relative;
  }
  
  #slider a.left,
  #slider a.right {
    position: absolute;
    top: 45%;
    z-index: 9999;
    font-size: 72px;
    color: #fbf9f2;
    text-shadow: 0 0 75px #000000;
    opacity: .5;
    -webkit-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out;
  }
  
  #slider a.left:hover,
  #slider a.right:hover {
    opacity: 1;
  }
  
  #slider a.left {
    left: 2.5%;
  }
  
  #slider a.right {
    right: 2.5%;
  }
  
  #slider ul {
    width: 100%;
  }
  
  #slider ul li {
    height: 100% !important;
    width: 100%;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center;
  }
  
  #slider div.container {
    position: relative;
    height: 100%;
    background: url("images/coming.png") no-repeat bottom center;
  }
  
  #slider div.container h2,
  #slider div.container h5,
  #slider div.container p {
    font: 800 48px/2em "Averia Serif Libre", cursive;
    -webkit-text-stroke: 0.2px;
    color: #fbf9f2;
    text-shadow: 0 0 75px #000000;
    text-align: center;
    display: block;
    width: 100%;
  }
  
  #slider div.container h2 {
    padding-top: 175px;
  }
  
  #slider div.container p {
    position: absolute;
    top: 300px;
    left: 0;
  }
  
  #slider div.container small,
  #slider div.container p {
    font-size: 18px;
  }
  
  #slider div.container div.video {
    text-align: center;
  }
  
  #slider div.container div.video iframe {
    display: block;
    margin: auto;
    -webkit-box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.5);
  }
  
  @media (max-width: 767px) {
    #slider div.container div.video iframe {
      max-width: 100% !important;
      max-height: 100% !important;
    }
  }
  </code></pre>
  
  <p>I tried without <code>.row</code>, inside one tag etc. Nothing helps. The code is inside a <code>&lt;li&gt;</code> and it's moved by Cycle2 plugin. I tried disabling it, yes.</p>
  
  <p>What can I do? This is iPad3-specific bug, nowhere else it shows.</p>