280011 2024-09-19 13:46:35 -0700 Add Quirks for overriding the Image Accept-Type for nhl.com 2025-01-19 22:22:05 -0800 1 1 1 Unclassified WebKit WebKit Misc. WebKit Nightly Build iPhone / iPad iOS 18 RESOLVED CONFIGURATION CHANGED https://bugs.webkit.org/show_bug.cgi?id=269875 https://nhl.com/ InRadar P1 Normal --- 178758 1 karlcow webkit-unassigned webkit-bug-importer oldest_to_newest 2061603 0 karlcow 2024-09-19 13:46:35 -0700 Cloudinary worked with Apple to not send anymore JPEG2000 to websites. nhl.com seems to still be sending some JPEG2000 to Safari on iOS only. We can create a quirk to force the server to not send the JPEG2000. See Bug 269875 for booking.com in the past https://github.com/WebKit/WebKit/pull/24923 Steps to reproduce: 1. On iPhone with Safari 2. Go to https://nhl.com/ Expected: See the images Actual: Some images are not visible. 2061604 1 webkit-bug-importer 2024-09-19 13:46:59 -0700 <rdar://problem/136315336> 2061621 2 karlcow 2024-09-19 14:16:33 -0700 See Also https://github.com/webcompat/web-bugs/issues/141887 for Outreach efforts. 2061656 3 karlcow 2024-09-19 15:36:09 -0700 Example of an HTTP request failing for https://media.d3.nhle.com/image/private/t_ratio16_9-size50/dpr_2.0/f_auto/v1726774090/prd/xo9sccwwnp3ywlwzzmnm.jpg ``` :method: GET :scheme: https :authority: media.d3.nhle.com :path: /image/private/t_ratio16_9-size50/dpr_2.0/f_auto/v1726774090/prd/xo9sccwwnp3ywlwzzmnm.jpg Accept: image/webp,image/avif,image/jxl,image/heic,image/heic-sequence,video/*;q=0.8,image/png,image/svg+xml,image/*;q=0.8,*/*;q=0.5 Accept-Encoding: gzip, deflate, br Accept-Language: en-US,en;q=0.9 Priority: u=5, i Referer: https://www.nhl.com/ Sec-Fetch-Dest: image Sec-Fetch-Mode: no-cors Sec-Fetch-Site: cross-site User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.2 Safari/605.1.15 ``` which leads to this HTTP response ``` :status: 200 Accept-Ranges: bytes Access-Control-Allow-Origin: * Access-Control-Expose-Headers: Content-Length,ETag,Server-Timing,X-Content-Type-Options Age: 9131 Cache-Control: public, max-age=31536000 cf-cache-status: HIT cf-ray: 8c5ce6f0da3b0fcc-LAX Content-Length: 184683 Content-Type: image/jp2 Date: Thu, 19 Sep 2024 22:09:47 GMT edge-cache-tag: 171565319839284922343488783462977444242,352914003381548804891280351548701409701,7a7e1c8a0d5c02db22a0dd5b7c64799f,~1~f0fbea064432605bfb4f7bee6ea508e8a63fec23 ETag: "e3ae41649502d350d554dddba7ddf161" Expires: Fri, 19 Sep 2025 22:09:47 GMT Last-Modified: Thu, 19 Sep 2024 19:30:06 GMT Server: cloudflare Server-Timing: cld-fastly;mitm=acp;dur=1531;cpu=1;start=2024-09-19T19:30:04.133Z;desc=miss,rtt;dur=0,content-info;desc="width=2560,height=1440,bytes=184683,owidth=2568,oheight=1444,obytes=365119,ef=(1,13,17,23)",cloudinary;dur=1519;start=2024-09-19T19:30:04.141Z,cld-id;desc=df2edeae613fe0feb92f386122d35f1a Strict-Transport-Security: max-age=604800 Timing-Allow-Origin: * Vary: Accept-Encoding X-Content-Type-Options: nosniff x-request-id: df2edeae613fe0feb92f386122d35f1a ``` The markup is ``` <figure class="d3-o-media-object__figure fa-image -ratio-16-9"> <picture class="d3-o-media-object__picture"> <!--[if IE 9]><video style="display: none; "><![endif]--> <source media="(min-width:1024px)" srcset=" https://media.d3.nhle.com/image/private/t_ratio16_9-size50/f_auto/v1726774090/prd/xo9sccwwnp3ywlwzzmnm.jpg 1x, https://media.d3.nhle.com/image/private/t_ratio16_9-size50/dpr_2.0/f_auto/v1726774090/prd/xo9sccwwnp3ywlwzzmnm.jpg 2x, https://media.d3.nhle.com/image/private/t_ratio16_9-size50/dpr_3.0/f_auto/v1726774090/prd/xo9sccwwnp3ywlwzzmnm.jpg 3x"> <source media="(min-width:768px)" srcset=" https://media.d3.nhle.com/image/private/t_ratio16_9-size40/f_auto/v1726774090/prd/xo9sccwwnp3ywlwzzmnm.jpg 1x, https://media.d3.nhle.com/image/private/t_ratio16_9-size40/dpr_2.0/f_auto/v1726774090/prd/xo9sccwwnp3ywlwzzmnm.jpg 2x, https://media.d3.nhle.com/image/private/t_ratio16_9-size40/dpr_3.0/f_auto/v1726774090/prd/xo9sccwwnp3ywlwzzmnm.jpg 3x"> <source srcset=" https://media.d3.nhle.com/image/private/t_ratio16_9-size30/f_auto/v1726774090/prd/xo9sccwwnp3ywlwzzmnm.jpg 1x, https://media.d3.nhle.com/image/private/t_ratio16_9-size30/dpr_2.0/f_auto/v1726774090/prd/xo9sccwwnp3ywlwzzmnm.jpg 2x, https://media.d3.nhle.com/image/private/t_ratio16_9-size30/dpr_3.0/f_auto/v1726774090/prd/xo9sccwwnp3ywlwzzmnm.jpg 3x"> <!--[if IE 9]></video><![endif]--> <img alt="LINE DANCING" class="img-responsive" loading="lazy" src="https://media.d3.nhle.com/image/private/t_ratio16_9-size30/f_auto/v1726774090/prd/xo9sccwwnp3ywlwzzmnm.jpg"> </picture> </figure> ``` for this markup only https://media.d3.nhle.com/image/private/t_ratio16_9-size50/dpr_2.0/f_auto/v1726774090/prd/xo9sccwwnp3ywlwzzmnm.jpg is sent as JPEG2000 because this is the one requested with source selection but if I look at understanding which of these are JPEG2000 vs JPEG, this is about half of them. 2062350 4 karlcow 2024-09-23 09:47:10 -0700 Note that a UA override is not solving anything. I need to test Accept Headers. The Accept Header for # Safari HTML: Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Image: Accept: image/webp,image/avif,image/jxl,image/heic,image/heic-sequence,video/*;q=0.8,image/png,image/svg+xml,image/*;q=0.8,*/*;q=0.5 # Firefox HTML: Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Image: Accept: image/avif,image/webp,image/png,image/svg+xml,image/*;q=0.8,*/*;q=0.5 # Chrome HTML: Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7 Image: Accept: image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8 2065067 5 karlcow 2024-10-02 22:37:30 -0700 I don’t know if something changed recently. But I can’t reproduce on macOs and iOS both iPhone and iPad. It would be good to have other people to confirm. https://nhl.com/ 2088450 6 karlcow 2025-01-19 22:22:05 -0800 This has been I believe this has been resolved.