Lightbox in full-screen mode: clicking anywhere outside of image should close the overlay

I have noticed a rather peculiar inconsistency regarding a full-screen lightbox: If i click in the dead space outside of the image, sometimes it closes the overlay, but sometimes it does not. It seems that there is a “Zone” where you can click - but not everywhere as expected.

See video: https://www.loom.com/share/4190f3cf68434195b268852cb4ea85c1

At an initial guess without inspecting the code, looks like there is some padding around the image. So when you’re clicking close to the image, your not actually clicking outside of the light box.

Ok, that could be, but my question remains … why? I didn’t change any code or CSS … as faras I’m concerned that’s not “standard procedure” when it comes to overlays …

If we have a way to look at the page we can probably be more help.

This happens when adding a plain old lightbox with full-screen and is not specific to any particular Blocs file or page which I tweaked. If you make a page with a lightbox interaction and set it to full screen you can observe the same thing …

Here’s a Blocs file which I just made to illustrate this. I guess I’m going to write a bug ticket, because for me it is one …lighbox-fullscreen.bloc (196.7 KB)

I’ve not experienced that in any of my fullscreen Lightbox. I can click anywhere outside on the image and it closes. You can also click on the x button to close. No classes, default settings.

Casey

Hey @gary yeah I see the issue, it looks like a problem with the full screen modal. What version of Blocs are you using?

3.3.0 I want to wait a bit to update to 3.4. …

Same here: no classes, default settings. Strange that things work for you. Which Browser?

Here’s an example: https://vmedia.de/blocs-lightbox/

This only happens when you click to the left or the right outside of the photo. Clicking above or below works as expected. Also: If you start clicking at the left or the right of the photo near the photo and continue to move away from the photo, at some point the overlay will close as it should. So it seems to be an area left and right that is not clickable … ??

See video:
https://www.loom.com/share/ca929634fd824c13a6127155a97c8c9e

If you watch, you can see that my mouse starts at the left edge of the photo and slowly moves outward. I am clicking the whole time I do this. At a certain point, the overlay does close.

Your example works fine on my desktop and mobile. Safari and Chrome?

Casey

1 Like

Yep same for me. That example works correctly on iPad and MacBook Pro.

What did you change from the bloc project file you originally posted. Because I had that issue with the bloc project, but not on the live link?

If you’re referring to this link: https://vmedia.de/blocs-lightbox/ I haven’t changed anything. I am still seeing the problem. Kind of a mystery to me …

Cleared your browser cache?

yes sir :slight_smile: