Skip to content

fix: prevent layout shift and appearance of horizontal scroll #793

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

Closed
wants to merge 1 commit into from

Conversation

aliataf
Copy link

@aliataf aliataf commented Jan 8, 2021

Description of Problem

The layout was shifting horizontally because some content passes their parents' width, so there was an annoying horizontal scrollbar showing in the documentation.

Proposed Solution

Prevent the horizontal overflowing by giving the overflow-x: hidden style to the html, body selector which fixes the problem and prevents any content from being horizontally shifted.

Additional Information

@skirtles-code
Copy link
Contributor

I've not seen this problem myself. Does it only happen on particular pages? Do I need to resize my browser window to a particular size to see it? Does it only happen in a specific browser?

Could you maybe include a screenshot?

@aliataf
Copy link
Author

aliataf commented Jan 8, 2021

@skirtles-code
It happens on the homepage no matter what the size of the browser window and I have tested it on Chrome 87.0.4280.88 and Firefox 84.0.2 as shown in the screenshot.
vuedocs

@skirtles-code
Copy link
Contributor

Thanks, I can reproduce it now. For me it kicks in below 1376px or 1300px depending on the page.

There are some media queries for the ads that seem to be causing it. I'm still digging to understand it properly.

@NataliaTepluhina
Copy link
Member

Closing this in favor of #798

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.

3 participants