Skip to content

Fix width issue - #262

Open
joshuacurtiss wants to merge 4 commits into
willmcpo:masterfrom
joshuacurtiss:fix-width-issue
Open

Fix width issue#262
joshuacurtiss wants to merge 4 commits into
willmcpo:masterfrom
joshuacurtiss:fix-width-issue

Conversation

@joshuacurtiss

Copy link
Copy Markdown

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

ghost commented Mar 6, 2023

Copy link
Copy Markdown

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!

Comment thread lib/bodyScrollLock.es6.js Outdated
Comment thread lib/bodyScrollLock.esm.js Outdated
Comment thread lib/bodyScrollLock.js Outdated
Comment thread src/bodyScrollLock.js Outdated
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

ghost commented Mar 31, 2023

Copy link
Copy Markdown

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

@deevanych

Copy link
Copy Markdown

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
Copy Markdown

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.

@slikmonkey slikmonkey left a comment

Copy link
Copy Markdown

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