I'm currently developing a jQuery lightbox plugin that needs to work seamlessly on both mobile devices and desktop computers. The main issue I'm facing is with the full-screen overlay effect. Most resources suggest using position: fixed or background-attachment: fixed for this, but fixed positioning is not fully supported on mobile devices, leading me to explore alternative solutions.
My current approach involves dynamically adjusting the overlay dimensions based on window resize events using $( window ).on( 'resize' ). However, this method causes flickering scroll bars when resizing the window, resulting in a jumpy user experience. You can see this behavior in action at the following links: (http://jsfiddle.net/dominic_p/ZqLCx/3/ or ).
Does anyone have suggestions on how to address this issue? While the code is still a work in progress, I've identified what I believe to be the two main problem areas in the jsFiddle example with a comment labeled "THE PROBLEM: START".
Update:
I recently came up with an idea to switch to position: fixed for desktop browsers while maintaining the window resize approach for mobile devices. This adjustment has improved performance, but there is still noticeable flickering when reducing the browser window size, especially vertically. Additionally, using position: fixed on Android 4 results in a large white gap on the side of the screen that can be horizontally scrolled through in portrait mode only. Any recommendations on resolving these issues?