Streaming live at 10am (PST)

Lightbox Moves Website 11px to Right

Hi, I’m having the same problem described in this post:

The OP never followed up, so I’m picking up where they left off. When I click an image link that opens up a lightbox everything on the site moves to the right, except for my navbar & footer.

Here’s an example of the problem: Screen Recording 2021-01-01...

This issue is showing up in Chrome, Firefox & Safari. All three are updated to the latest builds.

Any guidance is appreciated, thanks!

Welcome to the community @tre4!

This is a byproduct of how lightbox is changing the page below the modal to prevent the user from unintentionally scrolling to another area of the webpage below. When the modal is opened there is a .w-lightbox-noscroll class that’s added which changes the page from it’s default overflow to overflow: hidden—removing the space taken up by the page scrollbar:

image

If this property wasn’t added, not only would the original scrollbar of the page remain visible (which in the case of your screen recording, would lead to two scrollbars—one for the lightbox and one for the page below) but it also allows the user to freely scroll the page behind the lightbox. In terms of user experience, it would be pretty confusing if you entered a lightbox at one place on the page, only to close the lightbox and see a different place on the page.

It’s possible that there may be a hack, whether using custom code or a data attribute, that will disable the class from applying on a lightbox—but obviously this isn’t necessarily the best fix as it could negatively impact UX. If the page itself was not scrollable by default (let’s say it had a height of 100vh) then you wouldn’t notice the shift at all since there wouldn’t be a scrollbar taking up horizontal space. Similarly, if your a MacOS user who chooses to hide the scrollbar unless a page is being scrolled, this shift wouldn’t happen as the scrollbar is overlaid on top of the site content—rather than taking up physical space.

Hopefully that helps shed some light on the shifting, and while I agree it may be a bit “janky” looking it’s functioning as expected and not necessarily an issue with how you’ve built the site.