1697130 - Firefox 83+ no reset height for images with empty src attrib

Status: RESOLVED INVALID

(Core :: Layout, defect)

Description

[krystian3w]

Attachment: demo.html

+++ This bug was initially created as a clone of Bug #1602047 +++

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:71.0) Gecko/20100101 Firefox/86.0

Steps to reproduce:

• Open this demo: https://jsfiddle.net/4ch5t3wL/ or embeded demo
• In right down square you should see image element with "border" big as [height] attrib (embeded demo no need found right down shquare)

Actual results:

• Border for broken embeded images is huge as [height] attrib.

Expected results based on Chrome or Safari:

• Chrome 89 have border smaller (~20px like error icon for can't loaded resource) and something strange like "padding-bottom".
• Safari 14 should have small empty rectangle with height equal 1 line of text (maybe due <a href> ... </a>).

Comment 1

[Daniel Holbert [:dholbert]]

Safari 16 agrees with Firefox here, for what it's worth (rendering a rectangle that's quite tall, honoring the tall height attribute).

Current Chrome dev (112.0.5596.2 (Official Build) dev (64-bit) ) still renders the testcases with the image only as tall as the broken-image icon, as described in comment 0.

Comment 2

[Daniel Holbert [:dholbert]]

Actually, Chrome agrees with us as well -- they just draw a misleading border!

They draw a border as if the img were only ~1em tall; but in fact they have the image being just as tall as Firefox/Safari have it. You can see this if you add some text after it (which is super far down), or if you add an explicit border attribute, or if you inspect the img in devtools and see what the highlighted area is.

So, we're interoperable here on the height of the img element. It's only Chrome that draws a misleading border here, and I think that's a Chrome bug.

Comment 3

[Daniel Holbert [:dholbert]]

Attachment: testcase 2 (with a bordered wrapper div to show the img element's true border-box bounds)

Here's a testcase where Firefox/Chrome/Safari are interoperable on the size of the teal element. (And the teal element is set to shrink-to-fit the img element's bounds.)

Chrome draws a shorter border around the broken image icon, but that's misleading and doesn't show the img element's true height, as demonstrated by this testcase.

Comment 4

[Daniel Holbert [:dholbert]]

Attachment: testcase 3 (no alt attribute, and explicitly broken URL in src attribute)

Here's a variant, where I've added src="broken" (to make Firefox and probably Safari show the broken-image icon, since "broken" isn't a valid URL), and I've also removed the alt attribute.

This shows the same Chrome-specific behavior as in testcase 2.

Comment 5

[Daniel Holbert [:dholbert]]

I filed https://bugs.chromium.org/p/chromium/issues/detail?id=1420044 on the Chrome-specific behavior here.

(Sorry that this bug sat unnoticed for a while! Thanks for the report here and for your earlier report in bug 1602047. Hopefully we can get Chrome fixed so that this looks interoperable.)