1449810 - img element without src has 0 width box

Status: RESOLVED DUPLICATE of bug 851048

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

Description

[Karl Dubost💡 :karlcow]

This is a spin-off of https://webcompat.com/issues/16223
(there might be an already opened bug about this)

Using this CSS

.img-cover {
	background-size: cover;
	height: 100vw;
	width: 100vw;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	transform-origin: 0 0;
}


WORKING (with src="")
=================================
<div style="min-width: 100vw;
	    min-height: 100vw;">
  <img class="square-min img-cover" 
       style="background-image: url(&quot;https://cdn.filipinocupid.com/memphoto/photo1/big/11726201.jpg&quot;)" 

       src="">

</div>
=================================

NOT WORKING (without src)
=================================
<div style="min-width: 100vw;
	    min-height: 100vw;">
  <img class="square-min img-cover" 
       style="background-image: url(&quot;https://cdn.filipinocupid.com/memphoto/photo1/big/11726201.jpg&quot;)">


</div>
=================================


The code without src is working in Chrome and the image displays correctly

Comment 1

[Daniel Holbert [:dholbert]]

Seems related to bug 851048... haven't looked closely enough to be sure if it's a dupe or not, though.

Comment 2

[Daniel Holbert [:dholbert]]

Yeah, this is bug 851048.

The reason |src=""| seems to save us here is: it makes us render the "broken image" icon, i.e. it makes it render as a replaced element (which honors height/width) rather than like a <span> (which does not).

Comment 3

[Daniel Holbert [:dholbert]]

(In reply to Daniel Holbert [:dholbert] from comment #2)
> The reason |src=""| seems to save us here is: it makes us render the "broken
> image" icon, i.e. it makes it render as a replaced element (which honors
> height/width) rather than like a <span> (which does not).

s/which does not/which does not (in Firefox in particular)/ -- this interop issue is what bug 851048 covers.