css Question posted in
Some basic documentation can be found here.

Css – Persistent alt text flashing in Firefox when loading images

When loading images on my site, firefox briefly (for around half a second) flashes the alt text before the image loads.

There are other issues about this, but everyone suggests adding

img:-moz-loading {
  visibility: hidden;
}

I have done so in the top-level CSS for the site, and it seemed to work in the past but has regressed. The alt text still flashes, and I can’t find any alternative paths forward. There is a closed Bugzilla report without any activity in the past 5 years.

Any idea on how to dig deeper into this? From what I can tell the img element has nothing non-standard going on.

Tags:

2

Answers


  1. 0

    I assume that you have some kind of lazy loader.
    So you can hide alt until img has src like this:

    setTimeout(() => {
  img.src = 'https://picsum.photos/120/120';
  imgBroken.src = 'https://pics';
} , 1000);
    /* Hide img without src */
img:not([src]) {
  visibility: hidden;
}

/* Нidden alt in img */
.img-hide-alt {
  font-size: 0;
}
    <img src="https://picsum.photos/120/120" class="img-hide-alt" alt="Test">

<img alt="Test" id="img">
<img alt="Test" id="imgBroken">
    Login or Signup to reply.
  2. 0

    You can set transparent text color on the image:

    img { color: transparent; }

    It seems to do the job in Firefox 123. Below is the filmstrip view of the page load generated by webpagetest.org:

    webpagetest page load filmstrip view

    • The test was done on Firefox nightly on a fast 3G network. All four images have alt, width, height and background-color set.

    • The top two images do not have any CSS while the bottom two images have color: transparent.

    • The top two images display the alternate text until the image starts rendering. The bottom two images do not display the alternate text at all.

    As for :-moz-loading, the documentation says that:

    Note that images that are in the process of loading are not matched by
    this pseudo-class.

    The description of "in the process of loading" is not provided but we can assume that the process starts as soon as the image is "queued" for downloading.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search