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?

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

This question has been locked because the original author has deleted their account. While you can no longer post new replies, the existing content remains available for reference.