search

biati-digital / glightbox

Pure Javascript lightbox with mobile support. It can handle images, videos with autoplay, inline content and iframes
MIT License
2.01k stars 226 forks source link

Page scrolls to top after closing lightbox (mobile only) #485

Closed K-Jayk closed 2 weeks ago

K-Jayk commented 4 months ago

Describe the bug I am working on a wordpress website, built in Oxygen builder. (Using these instructions: https://oxygen4fun.supadezign.com/tutorials/how-to-add-a-lightbox-effect-to-your-images/). The lightbox works beautifully on desktop.

Unfortunately, on mobile, whenever a lightbox is opened, the page reset to the top. So the user is forced to re-scroll all the way back to where they were previously. I noticed that the scroll-reset seems to happen as/before the lightbox even loads.

I'd like for the browser to to be on the same place when the user closes the lightbox.

So far I've seen this on iPhone Pro 13, Sony Xperia II, Samsung Galaxy.

I noticed a similar problem posted from 2018, but it was marked as resolved, so I assumed that downloading the latest version of the code would work, but it doesn't seem to be the case...

gingerchew commented 3 months ago

Hmmmm, that sounds out of our (and your) control. GLightbox docs recommend (and is built around) using <a> tags, but you could use the provided API to use buttons instead. My thought is that the browser sees the user click on a link, can't go to the href, and so instead goes to the default behavior (scroll to top in this case). Buttons don't have any scroll behavior intended in their purpose.

gplopes commented 2 months ago

adding this, solved my issue.

.glightbox-open {
  height: auto;
}
Cessquill commented 2 months ago

I've got the same issue on a site I'm developing, although it's on desktop.

I've narrowed it down to the css on my site...

html, body { height: 100% !important; }

This is for the design of the layout and can't really be changed at this stage. Remove this line, all fine. Is there a workaround? I could change the height on open & reset on close I guess.

gingerchew commented 3 weeks ago

@Cessquill What about using min-height?

html,
body {
    min-height: 100% !important;
}
Cessquill commented 2 weeks ago

@gingerchew Thanks for that - I'll give it a look this week.

I ended up for now removing the global style and giving the HTML & body tags a class on all pages and removing / readding that class on open / close. Parked it for now as good enough, but I'll pick it up again shortly.

Thank you!