Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Images/ columns sometimes don't show up in firefox, then they do after refreshing. or the opposite and they disappear after refreshing

  • 6 odgovori
  • 2 ima ovaj problem
  • 1 view
  • Posljednji odgovor poslao f.najlaa

more options

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

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

Izabrano rješenje

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;
    }
}
Pročitajte ovaj odgovor sa objašnjenjem 👍 0

All Replies (6)

more options

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?

more options

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 ?

more options

I'm just guessing from the shortcode_animated class name that it's something in the shortcode for the gallery?

more options

Odabrano rješenje

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;
    }
}
more options

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

more options

Found it, thank you again jscher2000! Hope you have an awesome week