On Aug 14th 11 PM ET/Aug 15th 03:00 UTC, due to scheduled Firefox Account server maintenance, users may not be able to sign in or create a new subscription. This is expected to last approximately 30 minutes. Status updates can be found at https://status.vpn.mozilla.org or https://status.relay.firefox.com.

ابحث في الدعم

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 ردود
  • 2 have this problem
  • 63 views
  • آخر ردّ كتبه 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

الحل المُختار

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)

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?

Helpful?

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 ?

Helpful?

more options

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

Helpful?

more options

الحل المُختار

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

Helpful?

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

Helpful?

more options

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

Helpful?

اطرح سؤالا

عليك الولوج إلى حسابك للردّ على المشاركات. من فضلك اطرح سؤالًا جديدًا لو لم يكن لديك حساب بعد.