Untitled

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta id="viewport" name='viewport' content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<title>Problem</title>
<style type="text/css">
  .backdrop-problem-1 {
    /* just this class causes trouble in the new ipad */
    position: fixed;
  }

  .backdrop-problem-2 {
    /* this, together with .backdrop-problem-1, causes trouble in old ipad */
    -webkit-backface-visibility: hidden;
  }

  .backdrop-no-problem  {
    position: absolute;
  }

  /** ---------- */

  #backdrop {
    top: 0; left: 0; width: 100% !important; height: 100% !important;
    background-color: yellow; border:3px solid #ff3300
  }

  ul {
    border: 1px dotted red; list-style: none; margin: 0; padding: 0;
    position: absolute; top: 0px; width: 251px; height: 160px;
  }

  .demo-list {
    overflow: hidden; position: absolute;
    left: 96px; width: 753px; top: 57px; height: 170px;
  }

  .demo-list-scroller {
    border:5px solid green;
  }

  .btns { position: absolute; z-index: 150; font-size: 20px; color: black; background-color: white; }
  .btns a { color: black; }
</style>
</head>

<body>
    <div id="backdrop" class="backdrop-no-problem" style=""></div>

    <div class="demo-list">
        <div class="demo-list-scroller" style="position: relative; width: 765px; height: 160px; left: 0px;">
          <ul style="left: 0px;"><li><a href="#"><img src="http://upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia-logo.png" /></a></li></ul>
          <ul style="left: 251px;"><li><a href="#"><img src="http://upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia-logo.png" /></a></li></ul>
          <ul style="left: 502px;"><li><a href="#"><img src="http://upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia-logo.png" /></a></li></ul>
          <ul style="left: 753px;"><li><a href="#"><img src="http://upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia-logo.png" /></a></li></ul>
          <ul style="left: 1004px;"><li><a href="#"><img src="http://upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia-logo.png" /></a></li></ul>
          <ul style="left: 1255px;"><li><a href="#"><img src="http://upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia-logo.png" /></a></li></ul>
          <ul style="left: 1506px;"><li><a href="#"><img src="http://upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia-logo.png" /></a></li></ul>
          <ul style="left: 1757px;"><li><a href="#"><img src="http://upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia-logo.png" /></a></li></ul>
          <ul style="left: 2008px;"><li><a href="#"><img src="http://upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia-logo.png" /></a></li></ul>
        </div>
      </div>

  <div class="btns">
    <a href="#" class="nav" id="nav-left">LEFT</a> <a href="#" class="nav" id=
    "nav-right">RIGHT</a>

    <a href="#" onclick=
    "javascript:$('#backdrop').removeClass('backdrop-no-problem').addClass('backdrop-problem-1'); return false;">Issue #1</a>
    <a href="#" onclick=
    "javascript:$('#backdrop').removeClass('backdrop-no-problem').addClass('backdrop-problem-2'); return false;">Issue #2</a>
  </div><script type="text/javascript">
  $(function() {
  var left = 0;
  $('#nav-left').click(function() {
      if (left <= 0) {
        return;
      }
      left -= 753;
      $('.demo-list > div').animate({
        left: -1 * left
      }, 500);
  });
  $('#nav-right').click(function() {
      if (left >= 1355) {
        return;
      }
      left += 753;
      $('.demo-list > div').animate({
        left: -1 * left
      }, 500);
  });

  $('.demo-list a img').on('mouseover', function() {
    $(this).stop().css('position', 'absolute').animate({top:-200});
  }).on('mouseout', function() {
    $(this).stop().animate({top:0, position:'absolute'});
  });
  });
  </script>
</body>
</html>