Bug 247020 – REGRESSION (iOS 16): Incorrect text color used with matching translucent border color

• Status: RESOLVED
• Resolution: FIXED
• Component: CSS

[Kevin Muncie]

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

[Kevin Muncie]

Created attachment 463237 [details]
Screenshot of iOS 16 white text bug

[Radar WebKit Bug Importer]

<rdar://problem/101560064>

[Ahmad Saleem]

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.

[Simon Fraser (smfr)]

This might be the same as bug 245465.

[Alexey Proskuryakov]

Doesn't appear to be, this still reproduces in a build where bug 245465 is fixed.

[Kevin Muncie]

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

[Aditya Keerthi]

Pull request: https://github.com/WebKit/WebKit/pull/8410

[Aditya Keerthi]

Thank you for the reduced test case and detailed bug report!

I have retitled the issue, since this is unrelated to system dark appearance.

[EWS]

Committed 258762@main (cc12988dce62): <https://commits.webkit.org/258762@main>

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