Monitor Reply

Support

Lightbox display on mobile phones

Permalink Browser Info Environment April 10, 2024 at 9:49 AM

I still have a problem with the lightbox display on mobile devices.
Everything looks ok in the preview, but on the real device the lightbox is much too deep and too long. How to improve this?

https://c5.stelze.at/de-at/produkte/absperrsysteme/barrikaden/grunde...

3 Attachments

Type:	Discussion
Status:	Resolved

JohntheFish replied on Apr 10, 2024 at 11:47 am Permalink Reply

I had a look at your referenced page on my mobile and it looks like the overall lightbox height to fill the window on my phone is about 3x bigger than it should be.

Omni doesn't have anything to do with the lightbox height, that is determined completely by the magnific script. It could be a problem in the magnific script itself, perhaps not allowing for the device pixel ratio. The magnific page on Github has quite a few open issues when I search for 'height' and 'mobile'. Sometimes this kind of problem can be traced back to a theme not providing headers for such, but I doubt if that is the case in your particular situation because everything else seems to be good on a mobile. I suspect this stems from magnific.js being quite an old script that pre-dated retina devices and high pixel ratios.

You may be able to fix this with some CSS to override the magnific.js CSS, perhaps by using vh and vw units instead of % units to size the overlay and background. But that in turn could have unintended consequences.

For the longer term,I have been considering a couple of enhancements to Omni Gallery:
a) Provide a general option to disable lightbox on mobile, like I have for MT to disable transitions on mobile.
b) Provide additional overlay plugins such as bootstrap overlay, so there are alternatives for situations where magnific is not compatible.

strandbein replied on Apr 10, 2024 at 1:33 pm Permalink Reply 2 Attachments

Ok, I just don't understand why it works in the simulator and not on the real devices.
In this context, another question: On iPad, the full-screen display in FireFox is ok, but in Safari and Chrome the lightbox is only displayed in the area of the container it contains. What could be the reason for this?

JohntheFish replied on Apr 10, 2024 at 1:55 pm Permalink Reply

I suspect the difference is because the simulator has a 1:1 pixel ratio. Many mobile displays have 2:1, 2.75:1 and 3:1 pixel ratios.

Desktop browsers all grow from a limited and stable code base - chrome, firefox, webkit; benefit from a resizable window within the screen, less restraint on code size, and generally auto-update,

Mobile browsers have a more variable code base, are 'optimised' to full screen on their devices, and are often stuck in versions from the dark ages because they do not auto update. Hence it is possible that for some devices/browsers the more recent CSS is either not supported or is implemented in a very device specific and non-standard way.

As an aside, mobile devices also get stuck in arguments between a touch/swipe based element within a browser window and the overall touch/swipe scrolling and navigation of the device itself.

In many mobile situations a full screen modal overlay can become a superfluous nuisance because a gallery or carousel is already set for just 1 image across the screen. I will move the option to disable lightbox on mobile devices up in my list of things to do.

strandbein replied on Apr 10, 2024 at 2:17 pm Permalink Reply

Thank you for the comprehensive explanation.

strandbein replied on Apr 11, 2024 at 1:33 pm Permalink Reply

FYI: the display errors on mobile devices no longer exist with:

.mfp-wrap, .mfp-bg {
   top:0 !important;
   position:fixed !important;
}

JohntheFish replied on Apr 11, 2024 at 2:31 pm Permalink Reply

Thank you for posting this. I expect others will benefit.

Omni Gallery

Support

Lightbox display on mobile phones

Issue Reply

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

Request Refund

Code

Delete Post