Bug 247020

Summary: REGRESSION (iOS 16): Incorrect text color used with matching translucent border color
Product: WebKit Reporter: Kevin Muncie <nivek2002>
Component: CSSAssignee: Aditya Keerthi <akeerthi>
Status: RESOLVED FIXED    
Severity: Normal CC: ahmad.saleem792, akeerthi, jensimmons, koivisto, m_dubet, mmaxfield, nivek2002, rniwa, sabouhallawa, sam, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: Safari 16   
Hardware: iPhone / iPad   
OS: iOS 16   
Attachments:
Description Flags
Reduced test case HTML page of iOS 16 white text color bug
none
Screenshot of iOS 16 white text bug none

Description Kevin Muncie 2022-10-25 12:55:38 PDT 
Created attachment 463236 [details]
Reduced test case HTML page of iOS 16 white text color bug

When viewing the attach reduced test case HTML page on an iOS 16 device in Safari, the .whiteText text will not be white. Instead, the text will be whatever text color was last used for text that appears before .whiteText in the DOM.

This bug only appeared with iOS 16 on iPhone or iPad. It has not been seen to occur in previous iOS 15 releases or on any MacOS Safari releases.

This bug affects inline-* elements (e.g. inline, inline-block, or inline-flex) that contain text set to pure white (bug appears when using #fff, #ffffff, and white) with no alpha transparency.

Below are the exact requirements to reproduce this bug. The inline element must have:

* color set to pure white with no alpha transparency, using any color notation (e.g. hsl, rgb, hex).
* border-style set to solid. (All other values, such as dashed do not produce the bug).
* border-top-color, border-left-color, and border-right-color all set to pure white with alpha transparency less than one, using any color notation that supports alpha transparency e.g. rgba(255, 255, 255, 0.1). The transparency value must be the same for all three properties.
* border-bottom-color set to any color other than the value of the border-top-color, border-left-color, and border-right-color color and that meets these requirements:
   * initial, inherit, unset, or currentcolor
       * Interestingly, if you use currentcolor, the border will be the same incorrect color as the text.
   * Any color value defined with any color notation with alpha transparency less than one

If the requirements above are met, the inline element will receive whatever text color value was last used for text that appears before the inline element in the DOM.

A reduced test case has been attached and can also been seen at https://codepen.io/kmuncie/pen/WNyNKPx

The only other bug I could find that might possibly be related was https://bugs.webkit.org/show_bug.cgi?id=238466
Comment 1 Kevin Muncie 2022-10-25 12:56:53 PDT 
Created attachment 463237 [details]
Screenshot of iOS 16 white text bug
Comment 2 Radar WebKit Bug Importer 2022-10-25 13:54:21 PDT 
<rdar://problem/101560064>
Comment 3 Ahmad Saleem 2022-10-25 13:58:05 PDT 
I am able to reproduce this bug in Safari 16.1 on iOS 16.1, where the black background text show as "green" rather than intended "white".

This is limited to iOS and does not reproduce in Safari for desktop.

Further, I tested it via In-App Browser of Twitter and in Safari iOS as well and both show it as "Green" text rather than "white" as of desktop.
Comment 4 Simon Fraser (smfr) 2022-10-25 14:01:55 PDT 
This might be the same as bug 245465.
Comment 5 Alexey Proskuryakov 2022-10-26 17:10:46 PDT 
Doesn't appear to be, this still reproduces in a build where bug 245465 is fixed.
Comment 6 Kevin Muncie 2022-12-19 13:48:32 PST 
We have not seen any improvements on this through iOS 16.3 Developer Betas.

Is there any internal traction on understanding the root cause of this issue?

Thank you
Comment 7 Aditya Keerthi 2023-01-09 11:41:50 PST 
Pull request: https://github.com/WebKit/WebKit/pull/8410
Comment 8 Aditya Keerthi 2023-01-09 11:43:39 PST 
Thank you for the reduced test case and detailed bug report!

I have retitled the issue, since this is unrelated to system dark appearance.
Comment 9 EWS 2023-01-10 18:25:55 PST 
Committed 258762@main (cc12988dce62): <https://commits.webkit.org/258762@main>

Reviewed commits have been landed. Closing PR #8410 and removing active labels.