Firefox alt text appears while loading image

Question

On Firefox if you refresh a page you'll see the alt text appearing while an image is loading.

You can see it just on this Mozilla page (check the first image).

This doesn't happen on Chrome and other modern browsers.

I find an old issue on Bugzilla but it results as Fixed.

On that topic I find this pseudo solution (also here on Stack)

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

that works very well but as says the documentation it's non-standard:

Non-standard This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

Any solutions?

Notice: I won't consider solutions like color: transparent or similar, that hide the alt text to users, as it's needed.

Benign

I have the same issue... I'm using the latest firefox browser 91.0.2 (64-bits) When I use the refresh button, I see the alt text of the images – Corollaceous

@Corollaceous have you found a solution in the meanwhile? – Benign

@FredK Still no solution? – Prospectus

Answer 1

You can use onload and onerror to reset the color of the alt text when it's needed:

<img style="color: transparent;" onload="this.style.color='black'" onerror="this.style.color='black'" src="https://source.unsplash.com/random/100x100" alt="Alternate text" />

Kail

I prefer to use "this.style.color='unset'" to simply revert to the previous color, that way you don't have to hardcode an specific color like black. – Hendon