Coverflow covers image when opening it

Hi Isabel,

I clicked on some of the images in the Weddings and Portrait areas on the page you linked and the coverflows no longer appear in front of the popup image.

Were you able to get the problem fixed on your own or am I looking in the wrong place? If you were able to find a solution on your own we would really appreciate it if you could let us know how you got things working correctly!

Hi Isabel,

It definitely could be browser related, do you see the same problem when using a different browser like Chrome or Firefox?

The overlay uses the z-index CSS property to make sure that it appears on top of the other page content, and if Safari is the only browser having trouble rendering that display setting correctly then I might have solution. I did some digging and found a custom CSS snippet that modifies the -webkit-transform setting which will hopefully get the image displaying as expected. Here is the code you can add in the Custom CSS area:

.mfp-wrap {
    -webkit-transform: translate3d(0,0,0);
    z-index: 1043;
}

Please let us know how it goes with that code!

Hi Isabel-

We did some more testing with an iPhone, and it looks like this is caused by the way Mobile Safari is handling the transform property that gives those background images the slanted appearance.

Here’s a CSS rule that will mitigate this for you:

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