Android browser doesn't display lightbox effects correctly

  • Chris Whitford

    (@fcwhitford)


    9 years, 2 months ago

    Nextget V2.0.66.37. Using any of the lightbox effects and an Android tablet (Android 4.0.4), the images are displayed behind everything else. (I’m using the Inkness theme. With this I can see bits of the image behind other parts of the page.) After some searching I found that the problem is with webkit not handling the z-index value correctly with position:absolute. The solution is to add the following CSS:
    #fancybox-overlay, #fancybox-wrap {-webkit-backface-visibility: hidden;}
    which doesn’t seem to have any other side effects. As it is a problem with webkit it might affect Safari as well. I’ve created a child theme and put the CSS into the child theme stylesheet. This is for the fancybox effect; for the other effects the id’s will be different. For the lightbox they are: #jquery-overlay and #jquery-lightbox. The fancybox seems most suitable for mobile devices because the images are scaled to fit the viewport.

    https://wordpress.org/plugins/nextgen-gallery/

Viewing 1 replies (of 1 total)
  • Plugin Contributor photocrati

    (@photocrati)

    9 years, 2 months ago

    @fcwhitford – Thanks for sharing the work-around you required for your site … although I have not tested with an Android tablet I have not seen anything like you are describing using Safari on a Mac Book Pro, iPhone 6+, or an iPad so it could possibly be just with the browser on that particular type of device.

    – Cais.

Viewing 1 replies (of 1 total)
  • The topic ‘Android browser doesn't display lightbox effects correctly’ is closed to new replies.