iOS Safari window.scrollTo / getBoundingClientRect bug
This is a weird one, and not something you will stumble into every day. But it is a bug nonetheless.
On iOS safari, if you use
window.scrollTo(0, y) and
y is larger than document's maximum scroll, any immediate call to
getBoundingClientRect will return incorrect
top value. (Same will happen for horizontal scroll and
What happens is that browser thinks it actually scrolled to
y and calculates element's position based on that scroll position. This happens only if
getBoundingClientRect are executed one right after the other.
requestAnimationFrame will save you. Adding a small timeout will, but that is not a viable solution.
I've tested it only on iOS 11, but I guess other versions are affected as well.
Solution is easy, we need to determine maximum possible scroll and to cap our
; // Value larger than maximum scroll ; // Fix for bug on iOS devices // When top was larger than maximum page scroll // "getBoundingClientRect" would take that value into calculations if top > maxScroll // Scroll the window to the new position 0, top; // Get the new position ;
Hope that helps!
P.S. There is another bug on iOS Safari with
position: fixed, but that one is documented and tracked.