Further fine tune scroll locking on iOS #2891
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR fixes an issue that I only noticed in a production build and not in the local development
version (potentially related to strict mode?).
However, we are trying to scroll lock the page on iOS, a way to do this is to add
overscroll-behavior: contain;
and callevent.preventDefault()
in thetouchmove
event. Whilethis works great, we have to account for scrollable elements inside the allowed containers (e.g.:
a scrollable table in a dialog).
We did this by checking whether or not the
event.target
or any of its parent were scrollable. Theheuristic we used was two-fold:
overflow: auto | scroll;
,overflow-x: auto | scroll;
andoverflow-y: auto | scroll;
element.scrollWidth
>element.clientWidth
orelement.scrollHeight
>element.clientHeight
The issue is the first step, if an
overflow
property exists but there is no overflowing happeningthen the
overscroll-behavior
for some reason doesn't have any effect and it will result in themain page being scrollable.
Purely relying on step 2 seems to fix this issue.