Body scroll is not blocked on IOs #206

alexanderKhvostov · 2020-12-03T11:57:31Z

Hi, sorry but it doesn't work :(
I still can sometime scroll body. Maybe Apple again has changed something?

Iphone 11pro IOs 13.6.
https://www.loom.com/share/9fe89fe098e64e64a26d5533f9921f29

jvitela · 2020-12-14T08:17:44Z

Hi, @alexanderKhvostov you have a look at this pull requests and see if it works for you:
#207

horaklukas · 2021-01-18T13:40:00Z

I experience the same issue at least on iOS 12 😕

The PR #207 is not helpful, settings overflow: hidden is not a solution.

jvitela · 2021-01-24T11:26:25Z

Hi @horaklukas,

Can you please elaborate how did you test PR #207 ? Did you inspect the dom to make sure overflow: hidden was actually applied to the body element?

yoonjaepark · 2021-02-10T05:33:41Z

Hi @jvitela

In some cases, the scroll has arrived at the bottom of the scroll element area. If there is a scroll in the content area, the scroll of the content moves.

<body>
  // scroll content
  <div>
  </div>
  // scroll popup element 
  <div>
  </div>
</body>

arthurzhukovski · 2021-03-12T09:55:56Z

@jvitela unfortunately this doesn't help. Since OP haven't provided much details I'd like to elaborate on when this bug might be seen.
There're two conditions required for this bug to happen:

Safari's toolbar (which is located on the bottom of the screen) must be hidden
User's finger must be placed on the bottom of the screen

If these two conditions are met and user starts scrolling, it will happen.

If finger is being put on any other place of the screen or when the toolbar is shown, everything works as expected.
I believe this bug is caused by some Safari internals and nothing can be done for now.

chendong-xie · 2021-06-15T11:47:27Z

@JonesTwink

hi，did you solve it?

jvitela · 2021-06-15T12:09:49Z

Hi @chendong-xie and @JonesTwink,

Yes, my last change fixes this issue. Setting position:fixed forces the browser to display the toolbar and therefore there is no scrollable area.

Please do test the latest changes of the feature branch and confirm if it also works for you. The examples are updated so you don't need to rebuild it yourself.

chendong-xie · 2021-06-16T03:19:26Z

hi @jvitela this way looks ok, thank you for your reply.
when you plan to release this feature?

jvitela · 2021-06-16T07:09:23Z

hi @chendong-xie,

when you plan to release this feature?

That question should be answered by @willmcpo

n19htz · 2021-07-27T14:56:42Z

Hi @chendong-xie and @JonesTwink,

Yes, my last change fixes this issue. Setting position:fixed forces the browser to display the toolbar and therefore there is no scrollable area.

Please do test the latest changes of the feature branch and confirm if it also works for you. The examples are updated so you don't need to rebuild it yourself.

if you solving it with position: fixed you gotta be aware of scroll reset, i e for example you clicking a button that opens modal and that button is at middle of document (i e scrollTop > 0). Than when you lock the scroll with forcing safari to show bottom bar (by setting position:fixed) your scroll is gonna reset (scrollTop === 0)

jvitela · 2021-07-27T15:10:10Z

@n19htz Do you mean this? https://github.com/jvitela/body-scroll-lock/blob/3b7877b77c997751ff484a5f89ca2eeb5fda1bed/src/bodyScrollLock.js#L120

n19htz · 2021-07-27T15:12:50Z

@n19htz Do you mean this? https://github.com/jvitela/body-scroll-lock/blob/3b7877b77c997751ff484a5f89ca2eeb5fda1bed/src/bodyScrollLock.js#L120

yes, i've tried 4.0.0-beta version and scroll restoration does not work there

jvitela · 2021-07-27T15:18:25Z

@n19htz Could you please provide a minimal reproducible example? or in case it happens with the included examples a video showing the issue would be great and please indicate the browser and OS versions.

n19htz · 2021-07-27T15:43:51Z

iOS 14.5

pro_blur-2lsb0vqgm6.mp4

pawelbujna · 2021-07-29T10:13:21Z

I have a quetion, will this fix also fix the problem with jumping layout when clicking on inputs inside modals? I know that position: fixed casues the bug it happens only on scrollable elements. To fix my case i had to completely hide the page contents and display only a modal. Feels like it could be part of this bug.

Example video:

Screen.Recording.2021-07-29.at.12.10.38.mov

Trendymen · 2021-08-13T12:22:41Z

const { scrollY, scrollX, innerHeight } = window;
    document.body.style.position = 'fixed'; 
    document.body.style.top =  -scrollY;   //Mabye there and next line should be add + "px" in the end.
    document.body.style.left = -scrollX;

jvitela · 2021-08-13T12:25:04Z

Hi @Trendymen and @pawelbujna,

Please check #229

rick-liruixin · 2023-04-15T07:32:12Z

They stopped the repairs. I had to do it myself, in the same way, with a new version of typeScript. And fix these problems for everyone to use.

npm i body-scroll-lock-upgrade

repair Changelog
Refer to the releases page.

alexanderKhvostov changed the title ~~Body scroll is not blocked~~ Body scroll is not blocked on IOs Dec 3, 2020

alpabuz mentioned this issue Jul 13, 2021

safari ios 13.5, body is not locked FL3NKEY/scroll-lock#18

Open

jvitela mentioned this issue Aug 13, 2021

Fix bugs from previous patch #229

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Body scroll is not blocked on IOs #206

Body scroll is not blocked on IOs #206

alexanderKhvostov commented Dec 3, 2020

jvitela commented Dec 14, 2020

horaklukas commented Jan 18, 2021

jvitela commented Jan 24, 2021

yoonjaepark commented Feb 10, 2021 •

edited

arthurzhukovski commented Mar 12, 2021 •

edited

chendong-xie commented Jun 15, 2021 •

edited

jvitela commented Jun 15, 2021

chendong-xie commented Jun 16, 2021

jvitela commented Jun 16, 2021

n19htz commented Jul 27, 2021

jvitela commented Jul 27, 2021

n19htz commented Jul 27, 2021

jvitela commented Jul 27, 2021 •

edited

n19htz commented Jul 27, 2021 •

edited

pawelbujna commented Jul 29, 2021

Trendymen commented Aug 13, 2021 •

edited

jvitela commented Aug 13, 2021

rick-liruixin commented Apr 15, 2023

Body scroll is not blocked on IOs #206

Body scroll is not blocked on IOs #206

Comments

alexanderKhvostov commented Dec 3, 2020

jvitela commented Dec 14, 2020

horaklukas commented Jan 18, 2021

jvitela commented Jan 24, 2021

yoonjaepark commented Feb 10, 2021 • edited

arthurzhukovski commented Mar 12, 2021 • edited

chendong-xie commented Jun 15, 2021 • edited

jvitela commented Jun 15, 2021

chendong-xie commented Jun 16, 2021

jvitela commented Jun 16, 2021

n19htz commented Jul 27, 2021

jvitela commented Jul 27, 2021

n19htz commented Jul 27, 2021

jvitela commented Jul 27, 2021 • edited

n19htz commented Jul 27, 2021 • edited

pawelbujna commented Jul 29, 2021

Trendymen commented Aug 13, 2021 • edited

jvitela commented Aug 13, 2021

rick-liruixin commented Apr 15, 2023

yoonjaepark commented Feb 10, 2021 •

edited

arthurzhukovski commented Mar 12, 2021 •

edited

chendong-xie commented Jun 15, 2021 •

edited

jvitela commented Jul 27, 2021 •

edited

n19htz commented Jul 27, 2021 •

edited

Trendymen commented Aug 13, 2021 •

edited