Bug 254847

Summary: AX: Safari - Dark Mode, Smart Invert Colors Active
Product: WebKit Reporter: m_spinneberg
Component: ImagesAssignee: Nobody <webkit-unassigned>
Status: RESOLVED WONTFIX    
Severity: Critical CC: jcraig, sabouhallawa, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Safari 16   
Hardware: iPhone / iPad   
OS: iOS 16   
Attachments:
Description Flags
Dark Mode with Smart Invert on iPhone - Inline Style of Invert 100 inserted
none
Dark Mode inactive, Smart Invert Active, CSS Invert Filter Disabled, Expected
none
HTML, Dark Mode and Smart Invert Active, Inline Style inserted none

Description m_spinneberg 2023-03-31 15:13:44 PDT 
Created attachment 465717 [details]
Dark Mode with Smart Invert on iPhone - Inline Style of Invert 100 inserted

Summary: 

Viewing the Apple Accessories Landing Page on Mobile Safari, Dark Mode and Smart Invert Colors active. 

When the Invert Colors Filter is disabled in CSS, there is an inline Style inserted for the image, creating a triple invert scenario and the text overlayed  on the image is presented with insufficient contrast. 

Inline Style: 
style="filter: invert(100%);"

URL: 
https://www.apple.com/shop/accessories/all

Steps: 
1. on iPhone, visit URL
2. Activate Smart Invert Colors
3. Notice the image is displayed in X-Ray mode (Classic Invert) which is intentional
4. Activate Dark Mode, refresh the page
5. Notice the image is displayed as the original color, no Classic Inver/X-ray
6. Notice the HTML shows an inline style of Invert 100%
Comment 1 m_spinneberg 2023-03-31 15:19:22 PDT 
Created attachment 465718 [details]
Dark Mode inactive, Smart Invert Active, CSS Invert Filter Disabled, Expected
Comment 2 m_spinneberg 2023-03-31 15:24:47 PDT 
Created attachment 465719 [details]
HTML, Dark Mode and Smart Invert Active, Inline Style inserted
Comment 3 James Craig 2023-03-31 18:27:56 PDT 
AOS bug, not WebKit
Comment 4 Radar WebKit Bug Importer 2023-03-31 18:28:55 PDT 
<rdar://problem/107496470>