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> ```
<rdar://problem/119832950>
Did this occur on older Safari Versions? Does it still reproduce in the latest Safari Tech Preview?
Hi, thanks for taking a look so quickly. I just downloaded and tested in the latest Safari Tech Preview available on Ventura and was able to reproduce the issue. Version: Release 184 (Safari 17.4, WebKit 18618.1.7.1.1)
Also, I will add another note: This bug does not impact all users on similar hardware and browser. After reproducing the issue myself, I was _unable_ to reproduce when connected to an external display. I disconnected the display (and made sure same network was used in both examples) and the issue started happening again.
Oddly opening web inspector fixes it.
This looks similar to bug 264303 which has been fixed.
Yes, so it turns out that this is the same bug as https://bugs.webkit.org/show_bug.cgi?id=264303 I confirmed using a ToT local build. The bug did not reproduce with my build, but when I reverted the patch locally it started reproducing. To sanity check, since the bug is somewhat flaky, I repeated this process a couple of times to confirm that the bug was indeed resolved by that patch. Looking at the most recent STP release notes it seems like it has not been picked up yet. *** This bug has been marked as a duplicate of bug 264303 ***
Thank you so much to everyone for the quick action on this bug. I find it strange that we reported this within a week of it being fixed. Do you happen to know if this is a recent regression?
The code that caused the bug is actually fairly longstanding, but I first became aware of the bug in a way that had an impact on some content a little more than a month ago. A PR was opened for the bug around the same time, but it just so happened to land on main last week. The testcase in the PR is a reduced version of the content I saw where the bug was occurring (it was a page on an Amazon store)
Thank you for the context. So, it is not a coincidence. I am on the team that owns Brand Stores on Amazon. We received a bug report where images were not showing. After investigating, I created this minimal repro based on that bug and created this ticket. We have also disabled that experience while we work on a fix on our end. How did you become aware of the bug? Is there any ticket I could review to confirm it is the same issue that was reported to us?
The bug originally started as a radar, which is not publicly viewable, and made its way into the bugzilla as the original of this bug. It first reported on: https://www.amazon.com/stores/Jellycat/page/92DE52A7-85AC-40F4-A3A5-08B62869740E?ref_=ast_bln by just scrolling on the page. When new content was loaded on the page to show more items the images would not show up even though the rest of the information for the item would.
Thank you. Do you know if this was reported automatically through some sort of browser metrics / logs or if it was a manual report?
We happened to notice the same issue on amazon.com.
FYI: As a workaround, we discovered that adding flex-grow: 1 to the .inner-container prevents the issue from happening.