Images/ columns sometimes don't show up in firefox, then they do after refreshing. or the opposite and they disappear after refreshing
Hello, i have build a wordpress blog. it shows up without any issues in other browsers but in firefox the gallery in this page https://www.madamenoumb.fr/coiffures/ doesn't show. after refreshing several times it works. same thing for the home page. i am at a loss at what the problem is since it might work one time and not after refreshing. Could you please tell me how to fix this ? any help would be highly appreciated. Thank you, Najlaa
Chosen solution
Here is a brute force override:
/* Override hiding of gallery images to work around Fx issue */
.cmsmasters_gallery_item {
opacity: 1 !important;
}
On an unrelated topic that all these transitions bring to mind: this older code doesn't respect a user's preference for reduced motion (no animation). While I don't think there is a legal accessibility requirement to address that yet, it is a thing to consider going forward.
Again, the following is rather brute force and you may need to test side by side with another installation to judge whether it causes problems:
/* Globally respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}
Read this answer in context
👍 0
All Replies (6)
You know how the images fade into view? It appears that on a fresh load (Command+Shift+R or Shift-click the Reload button), the script that manages the fading works properly in Firefox. However, on a reload where Firefox is retrieving the page from cache, it doesn't make the images visible when it should.
The scripts in the site are a little complicated for a Sunday afternoon, so you might check with your theme support on whether they know about this and any suggested fix.
For reference:
Problem reload:
<li class="cmsmasters_gallery_item" style="width: 508px;"> => opacity: 0
Good reload, after scrolling this element into view:
<li class="cmsmasters_gallery_item shortcode_animated" style="width: 508px; position: absolute; left: 0px; top: 0px;"> => opacity: 1
I suppose a possible workaround might be to turn off the animation?
Hello jscher2000,
Thank you so much for your answer, i already asked the theme support and i received no answers. i didn't check that the theme was small before buying. and i need to fix this before delivery to the client :/
how could i turn off the animation completely ?
I'm just guessing from the shortcode_animated class name that it's something in the shortcode for the gallery?
Chosen Solution
Here is a brute force override:
/* Override hiding of gallery images to work around Fx issue */
.cmsmasters_gallery_item {
opacity: 1 !important;
}
On an unrelated topic that all these transitions bring to mind: this older code doesn't respect a user's preference for reduced motion (no animation). While I don't think there is a legal accessibility requirement to address that yet, it is a thing to consider going forward.
Again, the following is rather brute force and you may need to test side by side with another installation to judge whether it causes problems:
/* Globally respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}
Thank you soo much, that fixed it and it caused no other issues. i'll leave that for now until maybe i get a response from support otherwise it's good enough. there is the same thing happening in the home page with the recipe images. i am looking for the css class to which i should do the same thing. if you manage to find it please send. and Again thank you soo much, seriously a life saver
Found it, thank you again jscher2000! Hope you have an awesome week