Conflict with Lightbox Links = Page Shifts Upwards

[Acrakkops]

Hello,

I have an issue on the Gallery page of my website developed with Webflow. Locomotive Scroll works perfectly until I open the lightbox to view an image or video. When I close it, most of the time, the page shifts upwards, with varying degrees of displacement. This results in the header being cut off and a white band appearing under the footer. I have tried recalculating the page size with locoScroll.update using different triggers, but the problem doesn’t seem to stem from there. I have also tried modifying the structure of my page in various ways, loading the entire page before displaying it, but nothing works.

I should mention that the lightbox is the default one provided by Webflow, it is not customized.

I am using Windows 11 Professional, and as a browser, Chrome Version 127.0.6533.100. However, I noticed that on Firefox, the problem does not occur, everything works perfectly. Could it be a conflict between Chrome and Locomotive Scroll?

https://chiaroscuro-quartet.webflow.io/gallery (The problem occurs randomly.)

Does anyone have any idea, whatever it may be, on how I can work around this issue?

Thank you in advance for your attention to my request!

[ronca85]

You can "fix" this by adding:

html { height: 100%; top: 0; left: 0; position: fixed; width: 100%; }

A side effect is - you may notice a little less smooth scrolling behaviour. If you don't, problem solved.

In general the problem is Webflow and its more than a decade old bad practice where they use <a href="#"> instead of a <button> to launch a lightbox. You don't even need a lightbox - all the images are on the page already. Whenever you can, use proper elements, which is <button> in this case. Anchor elements that don't link anywhere are a no-no.