This bug applies to iOS Safari 9 on ipad and iphone. OSX safari 9 works as expected.
Any implimentation of -webkit-scroll-snap-coordinate or -webkit-scroll-snap-y on document.body breaks all scrolling functionality. Affected javascript methods include but not limited to:
- window.scroll(x, y)
- window.scrollTo(x, y)
- document.body.scrollTop = y
1) Any attempt to use these methods results in a never ending window.onscroll event alternating between 0 and the actual scroll position or an incriment between 0 and actual when the body is scrolled.
2) Navigating to an anchor href fails and causes endless scroll event.
3) When the window resizes -webkit-scroll-snap-destination is not updated to reflect the new viewport height.
4) Other generally buggy and unexpected behaviors across the board.
5) This work perfectly if implimented on any container other than document.body
This can be verified by the folowing code:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link href="test.css" rel="stylesheet">
<style>
body{
height: 100vh;
width: 100%;
overflow-x: hidden;
overflow-y: auto;
-webkit-scroll-snap-type: mandatory;
-webkit-scroll-snap-destination: 50% 50%;
}
.section{
height: 100vh;
width: 100%;
-webkit-scroll-snap-coordinate: 50% 50%;
font-size: 200px;
}
#nav{
position:fixed;
top:0;
width:100%;
height:50px;
color:white;
background-color: black;
font-size: 25px;
}
.a{
background-color: red;
}
.b{
background-color:blue;
}
</style>
</head>
<body>
<div id="nav">
<a href="#a">goto a</a>
<a href="#b">goto b</a>
<a href="#c">goto c</a>
<a href="#d">goto d</a>
<a href="#e">goto e</a>
</div>
<div id="a" class="section a">a</div>
<div id="b" class="section b">b</div>
<div id="c" class="section a">c</div>
<div id="d" class="section b">d</div>
<div id="e" class="section a">e</div>
<script>
//document.body.scrollTop = 0 // THIS WILL CAUSE ENDLESS SCROLL EVENT
window.addEventListener('scroll',function(){
console.log(document.body.scrollTop)
})
</script>
</body>
</html>