The content is twitching 15px from the right on MacOS Safari
TangoPJ opened this issue · comments
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?
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.
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 :) ).
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.