Bug 254533 - Safari iOS does not render an image with an updated src
Summary: Safari iOS does not render an image with an updated src
Status: RESOLVED CONFIGURATION CHANGED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Media (show other bugs)
Version: Safari 16
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2023-03-27 10:10 PDT by Greg
Modified: 2023-03-30 08:38 PDT (History)
1 user (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Greg 2023-03-27 10:10:10 PDT
The following URL will not render the intended image when viewed on iOS: https://gregbenzphotography.com/hdr-images/placid/

The image on the page is an AVIF, but the <img> src is update to use a JPG when the viewer does not support HDR. This must be done via JS (in the header of the page) due to limitations of the media query (https://bugs.webkit.org/show_bug.cgi?id=254489). This updated src works fine in all browsers I have tested other than iOS Safari. It is only expressed when Jetpack lazy loading is enabled and I suspect is timing related (adding a delay before updating the src also works around the issue, but is not a good workaround as this would result in unnecessary downloading of the AVIF).

You can see the expected result by bypassing lazy loading by viewing https://gregbenzphotography.com/hdr-images/placid/?forceLazy
Comment 1 Alexey Proskuryakov 2023-03-29 15:20:13 PDT
I cannot reproduce this on iPhone 14 Pro with iOS 16.5 beta. What iOS version are you seeing this with, and what is the exact symptom when it doesn't work?
Comment 2 Greg 2023-03-29 17:22:12 PDT
The symptom during failure is that the image was not visible at all (as if it were completely transparent, the affected element did show proper dimensions when I inspected in the developer console).

I just retested and am not seeing the issue on my page now either. I updated to iOS 16.4 yesterday after testing and submitting this report. So I just tried on another iPhone which is still on iOS 16.3 and the issue shows there still. What I found was that if I reloaded the page several times, it would occasionally load correctly (about 90% failure). I know timing could was a factor with iOS 16.3 as I added a slight delay and it worked, and the partial success sounds consistent with a timing-related issue.

So my best guess is that either 16.4 fixed it directly or it's some kind of race condition and iOS 16.4 has new timing which avoids the issue. Either way, probably best to close this issue as I am no longer able to replicate the issue either. I can refile with more details if it recurs in the future.


Thank you, Alexey, for looking into it.
Comment 3 Alexey Proskuryakov 2023-03-30 08:38:56 PDT
Thank you for the follow up!