# iOS Safari window.scrollTo / getBoundingClientRect bug

DevFeed: [iOS Safari window.scrollTo / getBoundingClientRect bug](<https://devfeed.tech/articles/ios-safari-window-scrollto-getboundingclientrect-bug-37294.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/ios-safari-get-bounding-client-rect-bug/>)

Author: Stanko

Published: 2018-06-01T00:00:00Z

Content type: tutorial

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [browser](<https://devfeed.tech/topics/browser.md>), [bug](<https://devfeed.tech/topics/bug.md>), [iOS](<https://devfeed.tech/topics/ios.md>)

Tags: [browser](<https://devfeed.tech/tags/browser.md>), [bug](<https://devfeed.tech/tags/bug.md>), [function](<https://devfeed.tech/tags/function.md>), [ios](<https://devfeed.tech/tags/ios.md>), [safari](<https://devfeed.tech/tags/safari.md>), [window](<https://devfeed.tech/tags/window.md>)

## AI overview

An iOS Safari bug can cause getBoundingClientRect to return an incorrect position when window.scrollTo is called immediately with a value beyond the document's maximum scroll. The article provides a workaround that caps the scroll value at the maximum possible scroll position.

## Source excerpt

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 left value. 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 scrollTo and getBoundingClientRect are executed one right after the other. Not even requestAnimationFrame will save you. Adding a small timeout will, but that is not a viable solution. Check the demo to see it yourself.Unfortunately I couldn't include the iframe with the demo, because of the other bug. Today's your lucky day, you got two bugs by the price of one! I've tested it only on iOS 11, but I guess other versions are affected as well. Solution # Solution is easy, we need to determine maximum possible scroll and to cap our y value. Helper method: function getPageMaxScroll() { // Cross browser page height detection is ugly return Math.max( document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight ) - window.innerHeight; // Subtract viewport height } Usage: let top = 1000000; // Value larger than maximum scroll const maxScroll = getPageMaxScroll(); // Fix for bug on iOS devices // When top was larger than maximum page scroll // "getBoundingClientRect" would take that value into calculations if (top > maxScroll) { top = maxScroll; } // Scroll the window to the new position window.scrollTo(0, top); // Get the new position const rect = this.contentWrapperElement.getBoundingClientRect(); Hope that helps! P.S. There is another bug on iOS Safari with getBoundingClientRect and position: fixed, but that one is documented and tracked.