Gallery won't load in Safari until you move or tap

[Anonymous]

I have many galleries and they’re all acting the same. Here’s one example: https://www.singh-ray.com/flagallery/adam-barker/.

It loads as expected in Firefox and Chrome browsers, but in Safari you have cause it to load. It just shows blank until you “do” something. On my MacBook I have to move my mouse over the images that don’t show and then the whole thing loads. On an iPad you have to tap the page (I’m guessing cause you can’t hover on a touchscreen).

I’ve updated all my plugins and wordpress is current too. Any ideas?

[Rattus]

I can’t reproduce this bug on my side. Tried with MacMini and Macbook Pro.

[Anonymous]

Are you sure you didn’t move your mouse on the page anywhere. As soon as you move your mouse it loads. Refresh and make sure not to touch anything and you should see the same. Definitely try on an iPhone or iPad and you will see the same. Checked on multiple devices, different users, different internet, different states. Nothing loads till you move the mouse or tap the glass.

[Rattus]

Try to disable autoptimize plugin for JS files.

[Anonymous]

I already have javascript optimization turned off in Autoptimize, it conflicted with something else when I built the site. I deactivated the plugin completely just to double check that, and cleared all my caches and still the issue persists.

[Anonymous]

Any ideas??? I don’t want to have to move everything to a new plugin.

[Anonymous]

I believe it has to do with this CSS being put out by the FlaGallery Plugin, specifically the -webkit-transition and transition lines.

.flagPhantom_Container {
opacity: 1;
text-align: center;
-moz-transition: opacity 1s;
-webkit-transition: opacity 1s;
-o-transition: opacity 1s;
-ms-transition: opacity 1s;
transition: opacity 1s;
}

When I use the code inspector in safari and comment out either of the bold lines, the elements become visible immediately. I’ve tried to override the transition style and timing using “!important” but nothing I try works.

[Rattus]

Try set !important only for opacity argument:
Got to admin Flagallery Skins page -> find Phantom skin and click ‘options’ -> at the very bottom of the settings popup add code below to the Custom CSS field:
.flagPhantom_Container { opacity: 1 !important; }

Then Update settings. Clear the browser cache to see changes.

[Author]

Posts