I’m working on a jQuery lightbox type plugin that needs to function for mobile devices and desktops. I’m having a problem with the full screen overlay effect. From my research, it seems that the standard solution for this is to use position: fixed or background-attachment: fixed to accomplish the overlay effect. Of course, mobile devices don’t support fixed positioning, and so I’m trying to find another way.
Right now, I’m attaching a function to $( window ).on( 'resize' ) to get the new dimensions of the window and set the overlay to them. The problem I’m seeing is that this is triggering flickering scroll bars that make the whole thing really jumpy when I size the window down. You can see the effect here: (http://jsfiddle.net/dominic_p/ZqLCx/3/ or http://3strandsmarketing.com/lightbox.php).
Any idea how I can solve this? The code is still in heavy development so it’s kind of a mess, but I tried to highlight what I think the 2 problem areas are in the jsFiddle with a comment that says "THE PROBLEM: START".
UPDATE:
I had a brilliant idea to just change the positioning to fixed for desktop browsers and still rely on my resizing scripts for mobile browsers. It seems to have helped a lot, but there is still some significant flicker when the browser window starts to get small (especially when shrinking it vertically). Also, when using position: fixed on Android 4 there is suddenly a large white gap on the side of the screen that I can horizontally scroll to in portrait mode only. Anyone have an idea of how to resolve either problem?
The solution for the flicker problem seems to be to set the
overflow-x(or justoverflowif you prefer) property for the<body>element tohidden. For curiosity’s sake, it actually wasn’t the overlay layer, but the lightbox contents that were causing the flicker.I’m still struggling with the white gap that shows up on Android, but that’s a separate problem, so I’m posting this as the solution.