search

willmcpo / body-scroll-lock

Body scroll locking that just works with everything 😏
MIT License
4.06k stars 339 forks source link

The content is twitching 15px from the right on MacOS Safari #251

Open TangoPJ opened 2 years ago

TangoPJ commented 2 years ago

How can I solve my problem, I'm using the package in my Nuxt.js project, in the chrome browser it works without problems, but when I open localhost in the Safari - the content is twitching 15px from the right?

kosmeln commented 2 years ago

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.

alexd3d commented 2 years ago

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 :) ).

rick-liruixin commented 1 year ago

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.