bootjp
11/30/2015 - 1:41 PM

iOS9 fixed element bug? -> https://bootjp.me/2015/11/30/ios9%E3%81%A7%E3%81%AEfixed%E3%81%AAelement%E3%81%AE%E6%89%B1%E3%81%84%E3%81%8C%E3%8

iOS9 fixed element bug? -> https://bootjp.me/2015/11/30/ios9%E3%81%A7%E3%81%AEfixed%E3%81%AAelement%E3%81%AE%E6%89%B1%E3%81%84%E3%81%8C%E3%81%8A%E3%81%8B%E3%81%97%E3%81%84bug/

sample.html
content_copyfile_download
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>iOS9 fixed element delay bug?</title>
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
<body>
<p>scroll pages!!</p>
<div class="sample_element" style="position: fixed;top: 30px;">this is fixed</div>
<div class="sample_element" style="position: absolute;color: #333; top: 250px;">this is absolute</div>
<style>
  .sample_element {
    display: none;
  }
</style>
<script type="text/javascript">
  var changePosition = 50;
  function scrollController() {
    if (window.scrollY < changePosition) {
      document.getElementById('msg').innerHTML = "<strong>In if statement.</strong>";
      Array.prototype.slice.call(document.getElementsByClassName('sample_element')).forEach(function(element) {
        element.style.display = 'block'
      });
    } else {
      document.getElementById('msg').innerHTML = "<strong>In else statement.</strong><br/ >Up pages";
      Array.prototype.slice.call(document.getElementsByClassName('sample_element')).forEach(function(element) {
        element.style.display = 'none'
      });
    }
  }
document.addEventListener('touchmove', function() {
  scrollController();
}, false);
document.addEventListener('scroll', function() {
  scrollController();
}, false);
</script>
<div id="msg" style="position: fixed;bottom: 0px"></div>
<br />
<br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

</body>
</html>