[wp-trac] [WordPress Trac] #62345: Issue on Google Chrome with lazy=load images = sizes=auto + css width: fit-content

[WordPress Trac]

#62345: Issue on Google Chrome with lazy=load images = sizes=auto  + css width:
fit-content
--------------------------+-----------------------
 Reporter:  mosne         |       Owner:  flixos90
     Type:  defect (bug)  |      Status:  assigned
 Priority:  normal        |   Milestone:  6.7
Component:  Editor        |     Version:  trunk
 Severity:  normal        |  Resolution:
 Keywords:  needs-patch   |     Focuses:  css
--------------------------+-----------------------
Changes (by flixos90):

 * keywords:  needs-testing => needs-patch
 * owner:  (none) => flixos90
 * status:  new => assigned
 * component:  General => Editor
 * milestone:  Awaiting Review => 6.7


Comment:

 Some updates:
 * This bug was introduced by
 https://github.com/WordPress/gutenberg/pull/66217.
     * Also see related follow-up fix
 https://github.com/WordPress/gutenberg/pull/66643.
 * This is not a Chrome bug, but it's a bug in Core / Gutenberg. Here's
 why:
     * Initially there is no content, so the calculated layout width is
 0px, which gets overridden by `contain-intrinsic-size: 300px 150px` from
 the UA stylesheet.
     * This is outlined in the HTML specification here:
 https://html.spec.whatwg.org/multipage/rendering.html#img-contain-size
     * Specifying `width: content-fit` overrides the `width` CSS property
 as inherited from the image's `width` attribute, and that in combination
 with the UA stylesheet leads to the bug.

 @juanfra Based on https://github.com/WordPress/gutenberg/pull/66217, it
 looks like this change was implemented because of a problem in Firefox.
 However, as outlined above it introduces a problem in Chrome which however
 is not Chrome specific, but directly tied to the rule explained in the
 linked section of the HTML standard.

 As such, I think we need to reconsider this fix, similar to how in
 https://github.com/WordPress/gutenberg/pull/66643 you already fixed it for
 SVG images. A potential solution would be to omit the `width: fit-content`
 for any images with `loading="lazy"` and `sizes="auto"`, in addition to
 how it's already omitted for SVG.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/62345#comment:2>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform