iOS - the page is being scrolled in background for tall modals

[limonte]

If you watch this video you will see after scrolling to the bottom the content in the background can be scrolled. Look at the top right hand corner for the darker scroll bar to move.

Originally posted by @wilecoyte78 in #1948 (comment)

[limonte]

I was able to reproduce this, but only a couple of times and it seems that it happens randomly. I can't come up with the steps to reproduce.

[brunoinds]

This problem is so antique, it almost like unsolvable using pure JavaScript code and CSS. I think the problem you're experimenting with is the "iOS Safari Scrolling Issue". Sometimes the scroll freezes, sometimes it only scrolls the body element, like it attaches the highest DOM node, not the event.target itself. I've already found a lot of "solutions" in forums, but, never in all cases where this problem should appear. The best way to correct it is to mix every soloution in Stackoverflow about the Safari Scrolling Issue (using JS, CSS fixed property, and frameworks specialized on it) and wish it resolves your problem. I think WebKit doesn't care about it. This problem exists about 8 years and nothing. You know, Apple being Apple with Web Developers.

[Jadhielv]

Hey! @limonte trying to reproduce this a four of times or more (iOS 14.2 beta) randomly in some browsers: Safari, Firefox and Chrome. I don't see any unexpected behavior, always scrolling is OK.

[Jadhielv]

Check this too @limonte

[limonte]

Still reproducible (iOS 14.2) here: https://sweetalert2.github.io/

Reproducible if you try to scroll right after triggering the modal:

[Jadhielv]

iOS 14.6 (18F72)

NOTE: ¿Will it be OK in this version? @limonte

[limonte]

The issue is still happening in iOS 15.

[Jadhielv]

@limonte thanks for the update.

[markusramsak]

I solved this issue for my own dialog plugin by using the following steps:

• wrapping the body content in a different container than the dialog container
• when opening the dialog container -> the body content container is hidden (on iOS you don't see what is behind anyway)
• after closing dialog -> everthing is restored (even the scroll position - because I saved it before opening the dialog)

This solutions works for me on my iPhone the last two years without any issues. And I only do this fix on mobile where this issue exists.

I hope it helps you fix it for iOS forever ;-)