1502660 - <img> display `alt` values when loading

Status: NEW

(Core :: Layout: Images, Video, and HTML Frames, defect, P3)

Description

[709922234]

Attachment: alt-text.mov

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:65.0) Gecko/20100101 Firefox/65.0

Steps to reproduce:

open `https://axinga.xyz/`

html source code:
```html
<img src="icons/icon.svg" alt="MT Music Player">
```


Actual results:

The alt value of icon is displayed when splash is displayed.



Expected results:

Do not display alt text unless the icon fails to load

Comment 1

[Andrew Osmond [:aosmond] (he/him)]

I can reproduce this. This is an SVG image, so presumably one of these conditions passed and we decided to briefly display the alt text:

https://searchfox.org/mozilla-central/rev/5b3b6b8fd9f90087f618c20382e631451136ed2b/layout/generic/nsImageFrame.cpp#1983

This doesn't happen on Chrome for me.

Comment 2

[709922234]

Attachment: Screen Recording 2021-09-08 at 11.36.58 PM.mov

When the image is loading, it is displayed that the ALT text is a bad user experience. Is it possible to fix this problem?

Comment 3

[709922234]

v103.0a1 Can't reproduce on dribbble.

But it can still be reproduce on https://music.xianqiao.wang

Comment 4

[709922234]

(In reply to 709922234 from comment #3)

v103.0a1 Can't reproduce on dribbble.

But it can still be reproduce on https://music.xianqiao.wang

Wrong, nothing changed

Comment 5

[709922234]

Attachment: Screen Recording 2023-10-10 at 15.37.16.mov

Dribbble has updated their code. The image uploaded by the user no longer include alt text, but can still see alt text when the avatar is loaded.

Here is a simple example: https://cotton-speckled-henley.glitch.me/

Comment 6

[[:anutrix]]

As a user, I kind of prefer current behavior of Firefox.

Regardless, what does the W3C specification say regarding this?

Comment 7

[[:anutrix]]

https://justmarkup.com/notes/2016-01-20-showing-the-alternative-text-while-images-are-loading/

I guess there are users who prefer the Firefox behavior and want other browsers to follow.

And current behavior matches MDN description:

The HTMLImageElement property alt provides fallback (alternate) text to display when the image specified by the <img> element is not loaded.
This may be the case because of an error, because the user has disabled the loading of images, or because the image hasn't finished loading yet.

Source: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt

Problem is that spec defines:

alt - Replacement text for use when images are not available

Source: https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-alt
This means it's not clear if not yet loaded and failed to load are different things. They both mean 'not available'.

This problem seems to be for W3C to discuss and solve.