search

BoldGrid / boldgrid-gallery

The BoldGrid fork of the WP Canvas Gallery plugin for WordPress.
https://www.boldgrid.com/
GNU General Public License v2.0
3 stars 1 forks source link

Coverflow images z-index not computing correctly on MacOS and iOS #9

Open jessecowens opened 4 years ago

jessecowens commented 4 years ago

Describe the bug On physical Apple devices, coverflow galleries are displayed with the z-indexes out of order, causing images meant to be "behind" the current slide to show up "on top" of them.

To Reproduce Steps to reproduce the behavior:

  1. Create a coverflow image gallery
  2. View the gallery on an iPhone using Safari or Chrome, or Apple computer using Safari.

Expected behavior The images should display correctly regardless of the hardware viewing them

Screenshots

Screen-Shot-2020-08-11-at-5-46-46-PM

Desktop (please complete the following information): Laptop 1: OS Catalina 10.15.5 Safari 13.1.1

Laptop 2: OS Mojave 10.14.6 Safari 13.1.2

Smartphone (please complete the following information): iPhone XS Max Version 13.6 Both Safari and Chrome have the issue

iPhone 8 Version 13.5.1 Both Safari and Chrome have the issue

Additional context I wasn't able to recreate the bug in Browserstack, but I did replicate it on a physical iOS device (iPhone 6S Plus)

jessecowens commented 4 years ago

This appears to be related to the way that Safari is handling the transform of the images below it, adding a CSS rule like this prevents the background from appearing above them:

.mfp-zoom-out-cur .gallery-icon {
    transform: none !important;
}