在iOS Safari上，window.scrollTo在方向更改后不起作用

Question

In short:

In iOS Safari, window.scrollTo method doesn't do anything if called from orientationchange event handler. It seems like a certain amount of time (500-1000ms) must pass before you can modify scroll position after orientation change.

Is there a workaround to change scroll position immediately and avoid the problem when user can see old scroll position for a moment after orientation change?

Detailed problem description:

I need to implement the following feature for mobile browsers:

When the user switches to landscape mode, he should see fullscreen video. When he switches back to portrait, he should be returned to exact same place where he left off.

The second part is the problem. Both iOS and Android will keep scroll position if you switch orientation back and forth, but only if you dont scroll the screen and dont make any adjustments to DOM. So if you just switch from portrait to landscape and back, everything works as expected. If you switch from portrait to landscape, adjust scroll position even by 1 pixel or make any changes to DOM, you will return to a different scroll position.

So I'm trying to pragmatically restore scroll position once the user returns to portrait orientation. Here's the simplified code I use:

    var scrollPosition;
    var savedScrollPosition;

    window.addEventListener('scroll', function() {
        scrollPosition = window.scrollY;
    });

    window.addEventListener('orientationchange', function(event) {
        if (Math.abs(window.orientation) === 90) {
            // This line will correctly save last scroll position for portrait orientation
            savedScrollPosition = scrollPosition;
        } else {
            // This line will correctly try to restore previously saved scroll position
            window.scrollTo(0, savedScrollPosition);
        }
    });

This works on android, but on iOS it doesn't. The problem is, window.scrollTo just doesn't seem to do anything until the certain time after orientation change has passed.

So if I change

window.scrollTo(0, savedScrollPosition);

to

setTimeout(function() {
    window.scrollTo(0, savedScrollPosition);
}, 1000);

it works on iOS, but the user can see wrong portion of the page for a few moments, which leads to a poor user experience.

I was hoping that somebody knows a way to change scroll position on iOS immediately after orientationchage event.

Thank you.

Answer 1

In the end, I was forced to go with the following code:

var scrollPosition;
var savedScrollPosition;

window.addEventListener('scroll', function() {
    scrollPosition = window.scrollY;
});

window.addEventListener('orientationchange', function(event) {
    if (Math.abs(window.orientation) === 90) {
        savedScrollPosition = scrollPosition;
    } else {
        if (isIOS()) {
            var retryScroll = setInterval(function () {
                if (window.scrollX === 0 && window.scrollY == savedScrollPosition) {
                    clearInterval(retryScroll);
                } else {
                    window.scrollTo(0, savedScrollPosition);
                }
            }, 10 );
        } else {
            window.scrollTo(0, savedScrollPosition);
        }
    }
});

The user will see a small visual glitch, but it's still the best solution.