Bug 202334 – Using a combination of var() and color() and transitions fails to work, causes high CPU load

• Status: RESOLVED
• Resolution: CONFIGURATION CHANGED
• Component: CSS

[Ali Bosworth]

In our web-app we are trying to define some colors as both normal RGB values and wide-gamut via `color(display-p3....)`.  We are hitting a situation where the color is not rendered at all.  We've reproduced as a test case and it seems to require the following factors: CSS variables being set and used + color() definition + transition on the element.  In our web-app it fails in that situation however, frustratingly, in our test-case it also requires the dev tools pane to be open as well.  Moving the style definitions inline into the test case also causes it to not break.

Here is the test case: https://mellow-blanket.glitch.me

Reproduction:

1) Open https://mellow-blanket.glitch.me in Safari
2) Open dev tools

Expected: all squares have a blue background
Result: 7th square has no background

I found an existing reference to this issue here: https://twitter.com/eldh/status/1170420603402240002

[Ali Bosworth]

Addendum: we noticed that loading the test case causes constant high CPU load.

[Radar WebKit Bug Importer]

<rdar://problem/55823475>

[Ali Bosworth]

No updates on this? It is a dealbreaker for any site trying use dynamic themes, which must be common today with darkmode support. 

Simon Fraser: is there any way to get some more eyes on this?

[Simon Fraser (smfr)]

Perhaps Antti can help.

[Ali Bosworth]

Thanks kindly Simon!

[Tyler Wilcock]

I can't reproduce this with Safari Version 14.0 (15610.1.28.1.9, 15610) nor the GTK mini-browser built from trunk.  Ali, can you confirm whether or not this is fixed for you?

[Antoine Quint]

I think we should close this, I cannot reproduce this either with Safari 16.