[Webkit-unassigned] [Bug 266601] New: Image size not being recalculated after image loads

Mon Dec 18 14:00:58 PST 2023

https://bugs.webkit.org/show_bug.cgi?id=266601

            Bug ID: 266601
           Summary: Image size not being recalculated after image loads
           Product: WebKit
           Version: Safari 17
          Hardware: Mac (Intel)
                OS: macOS 13
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Layout and Rendering
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: qmmille at amazon.com
                CC: bfulgham at webkit.org, simon.fraser at apple.com,
                    zalan at apple.com

Issue: Image width remains at 0 after image successfully loads.
Expected behavior: Image width should be recalculated to value greater than 0 after image loads.
Hardware: Apple Macbook Pro with M1 Pro
MacOS: 13.6.2 (22G320)
Safari Version: Version 17.2 (18617.1.17.11.11, 18617)
Minimal repro: https://codepen.io/Quinton-Miller/pen/WNPVLjw
Notes:
1. If you force a re-render (such as manually toggling a CSS value in dev tools), the image will display correctly.
2. I have tested in Chrome and Firefox and they behave as expected.
3. The minimal repro has an odd assortment of styles, however removing or modifying any typically fixes the issue. For example, changing the padding from "0.5em" to "0" fixes the issue.
4. This is also a race condition. If you add the styles (through JS or linking to an external CSS file) after the image has loaded, the image will display correctly.
5. I have tested this on multiple images and had same issue.
6. This issue was also reported on an iPad and multiple Safari versions.

Full code snippet:
```
<!DOCTYPE html>
<html>
  <head>
    <style>
      .outer-container {
        display: flex;
        align-items: center;
      }

      .inner-container {
        display: flex;
        padding: 0.5rem;
      }

      img {
        max-width: 100%;
        max-height: 100%;
      }
    </style>
  </head>
  <body>
     <a class='outer-container'>
      <div class='inner-container'>
        <img src="https://m.media-amazon.com/images/W/MEDIAX_792452-T2/images/I/817IkYo1mNL._AC_CR0%2C0%2C0%2C0_SX352_SY330_.jpg">
      </div>
    </a>
  </body>
</html>
```

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20231218/62d82b17/attachment.htm>