Comments (3)
We got the same issue. For me it happens when you have an external mouse connected - MacOS reserves a width for the scroll bar. When you turn off/disconnect the mouse - that width will be released, giving this space back to the page. Scrolling with a Touch Bar trigger the overlay scrollbar that overlaps the page - don't shift it.
What happens when we trigger the scroll lock - it that reserved width is released in some way, causing the page to visually shift.
from body-scroll-lock.
Hey guys, @TangoPJ @kosmeln
just had the same issue with new 4.0.0-beta. Plugin devs are setting left:0 top: 0 for body on iOS if it's locked , but seems like Safari does not always properly thinks that the width should be 100%. On tablet landscape instead of 1130 width I got only 930px size body container - so the right gap increases with viewport size. So in this case you just need to set for body "width: 100%" OR "right: 0" - it would force Safari to set body to full-width size as it should be. This can be set in general CSS file because I don't see scenario where this CSS rule break something else (I hope :) ).
from body-scroll-lock.
Hey guys, @TangoPJ @kosmeln just had the same issue with new 4.0.0-beta. Plugin devs are setting left:0 top: 0 for body on iOS if it's locked , but seems like Safari does not always properly thinks that the width should be 100%. On tablet landscape instead of 1130 width I got only 930px size body container - so the right gap increases with viewport size. So in this case you just need to set for body "width: 100%" OR "right: 0" - it would force Safari to set body to full-width size as it should be. This can be set in general CSS file because I don't see scenario where this CSS rule break something else (I hope :) ).
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. add react hooks、vue3 example
npm i body-scroll-lock-upgrade
repair log,Refer to the releases page.
from body-scroll-lock.
Related Issues (20)
- When enabled, scrolls to top of document in iOS Safari on Version: 4.0.0-beta.0 HOT 8
- Header Logo doesn't change to stacked version on Mobile
- Scroll bar width calculated incorrectly HOT 3
- Enabling and clearing body scroll don't work on iOS 15.1
- The scroll lock does not work if you swipe with two fingers at the same time
- Still able to scroll HOT 5
- Doesn't seem to lock HTML tag scrolling HOT 2
- iOS Devices: "restorePositionSetting" can run before "setPositionFixed"
- Inset of iOS devices is scrollable on modals HOT 1
- Black bar at bottom when safari toolbar is hidden on iOS 15
- The package is not tree-shakeable due to side-effects
- Is this package dead/abandoned? HOT 17
- Define a custom base element (not body) HOT 1
- iOS 16 Safari has width/size issues with wide content HOT 2
- This fork from vercel seems to fix some issues HOT 1
- Add example using React hooks HOT 1
- On IOS disableBodyScroll() makes element.scrollIntoView() not working HOT 1
- ESM build broken, causes scroll-to-top on iOS HOT 3
- Using logical css property instead of padding-right
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from body-scroll-lock.