Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Safari toolbars on iOS 15 show and hide when scrolling within a scrollable element #236

Open
alexfoxy opened this issue Oct 9, 2021 · 6 comments

Comments

@alexfoxy
Copy link

alexfoxy commented Oct 9, 2021

Testing the modal example on iOS 15 safari. Even though the body is locked in scroll position Safaris toolbars disappear / re-appear when scrolling inside a scrollable element. See video:
https://user-images.githubusercontent.com/151772/136651702-113ee9db-3e0c-4c33-b161-ad676a39c27d.mov

This is present in iOS 15.1 beta 3 also.

@PASHANSX
Copy link

PASHANSX commented Oct 9, 2021

The latest version body-scroll-lock has not been uploaded to npm.
The problem was that:
from
document.body.style.top = -scrollY;
document.body.style.left = -scrollX;
to
document.body.style.top = ${-scrollY}px;
document.body.style.left = ${-scrollX}px;

If you use the code from github, then everything will work correctly. But if you download from npm, you will get a bug.

@alexfoxy
Copy link
Author

I tried out the latest version from the repository and it is still an issue on iOS 15: https://codesandbox.io/s/bsl-ios15-z647i

@benoitbohnke
Copy link

Same here on 15.0

@One1L
Copy link

One1L commented Dec 10, 2021

Pls update banner in readme https://imgur.com/Wyl0Erw

@rick-liruixin
Copy link

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 log,Refer to the releases page.

@rick-liruixin
Copy link

最新版本的 body-scroll-lock 还没有上传到 npm。 问题在于 from document.body.style.top = -scrollY; document.body.style.left = -scrollX; 到 document.body.style.top = ${-scrollY}px; 文档.body.style.left = ${-scrollX}px;

如果你使用来自 github 的代码,那么一切都会正常工作。但是如果你从 npm 下载,你会遇到一个错误。

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 log,Refer to the releases page.

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants