Bug 272017 – [CSS Filters] brightness() causes high-brightness HDR flicker

• Component: CSS
• Status: NEW

[Michoel Samuels]

Created attachment 470715 [details]
Shows the unexpected behavior in Safari 17.4, and the the expected behavior in a Chromium browser

I've found an unusual behavior in Safari 17.4.

When the brightness() filter is applied to an element, for a split second the element's brightness becomes extremely bright, before settling down to the brightness specified by the filter. 
See the attached video. The issue does not appear in screen captures, so I took a video of the screen using a phone.

For a moment the element gets so bright that it appears "whiter" than every other element onscreen. It seems to activate the HDR layer of the display panel for moment (I'm using a 2021 MacBook Pro with M1 Pro).
It then "quiets down" and adopts the correct brightness value specified by the CSS filter.
The effect isn't as bad on iOS, but is definitely still there.
The effect does not appear in screen captures, so I wonder if it's triggering something in the OS or hardware level.


I've attached a video showing this issue.
The URL I used for testing is here:
https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/brightness

Let me know if there's any way I can help!
– Michoel

[Ahmad Saleem]

@Michoel - can you share more details about settings like 'Display' whether ProMotion is on and which 'Preset' (1600 nits or 500 nits) or True Tone (On / Off) you are using because I am unable to reproduce this much pronounced flickering as video (though there is still bit of flicker - in red part 'tail' of Firefox logo) using M1 Pro 14 Inch and M3 Max 14 Inch.

Also please can you try 'Safari Technology Preview 191' as well?

[Michoel Samuels]

Sure!

Scaling: Default
System Brightness: 90%
Automatically adjust brightness: On
True Tone: On
Refresh rate: ProMotion
Display Preset: Apple XDR Display (P3-1600 nits)

The issue is fully present in the latest Safari Technology Preview (Release 191 - Safari 17.4, WebKit 19619.1.6.3)

The only other relevant factor I can think of is that I often use Vivid (https://www.getvivid.app) to boost my
 system brightness while outdoors, but I confirmed that Vivid is not running when this issue occurs.

[Alexey Proskuryakov]

I also cannot reproduce this as in the video. Although the animation does appear to be a little glitchy in a similar way, it seems to go to a slightly higher brightness first before stabilizing.

>I've found an unusual behavior in Safari 17.4.

Could you please clarify if you've only tested Safari 17.4, or if this worked properly with Safari 17.3, and regressed with Safari 17.4?

[Michoel Samuels]

I've previously seen this issue on Safari 17.1, so the issue has been around for a while.
I'm not aware of it ever working properly.

I checked on a non-XDR external monitor, and the flickering occurs there too, but it isn't quite as bad.

[Radar WebKit Bug Importer]

<rdar://problem/125925799>