Skip to content
New issue

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

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

Already on GitHub? Sign in to your account

Fix width issue #262

Open
wants to merge 4 commits into
base: master
Choose a base branch
from

Conversation

joshuacurtiss
Copy link

Fixes #261. Details below! Thank you for this excellent project.

Adjustments to examples

I adjusted the samples to include traditional mobile responsive meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Then, I removed the left and right styles from the body tag in the examples as well, since websites using this library may not have those styles and we can't expect that they will be there.

Finally, I added some wide content that is wider than the page. This may be found, for instance, in pages with a carousel.

Fix

The fix is simple; just set the right style in addition to the top and left! Safari will no longer affect the width.

Ran the bundle scripts for the main code as well as the example bundles.

Also, removed the `left` and `right` styles from the body, since those
may not be present on the consuming project's styles.
@ghost
Copy link

ghost commented Mar 6, 2023

Hey, I think we encountered the same issue that this PR fixed.

We saw that setting right: 0px solved the issue when testing locally. However we cannot set the right 0px on our end, therefore we ended up setting body {width: 100%} to fix the issue.

Is there any known reason why this PR has not been approved?

Great package, thanks!

lib/bodyScrollLock.es6.js Outdated Show resolved Hide resolved
lib/bodyScrollLock.esm.js Outdated Show resolved Hide resolved
lib/bodyScrollLock.js Outdated Show resolved Hide resolved
src/bodyScrollLock.js Outdated Show resolved Hide resolved
By setting the body's `right` style, width is calculated properly in
Safari, which can avoid bugs in some situations where content width
is wider than the page width.
@ghost
Copy link

ghost commented Mar 31, 2023

Is there any rough estimate for when this could be merged and released?🤞

@deevanych
Copy link

Is there any rough estimate for when this could be merged and released?🤞

I guess not 😔 2 years silence 😶

You can use https://github.com/tuax/tua-body-scroll-lock, i guess it will solve your problem (it solved mine)

@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. add react hooks、vue3 example

npm i body-scroll-lock-upgrade

repair log,Refer to the releases page.

Copy link

@slikmonkey slikmonkey left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks good

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

Successfully merging this pull request may close these issues.

iOS 16 Safari has width/size issues with wide content
4 participants