1979562 - CSS light-dark() does not evaluate colors used in transitions

Status: RESOLVED DUPLICATE of bug 1985452

(Core :: CSS Parsing and Computation, defect)

Description

[VitDyn]

Attachment: quick html & css demonstrating the issue

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:141.0) Gecko/20100101 Firefox/141.0

Steps to reproduce:

Define colors as custom properties with a cascading dependency:

--fg-col-a09: light-dark(oklch(0.12 0.03 263 / 0.85), oklch(0.9 0 263 / 0.85));
--fg-col-a1: oklch(from var(--fg-col-a09) l c h / 1);
--bg-col-btn: color-mix(in oklch, oklch(54.326% 0.2107 28.04 / 0.281) 95%, var(--fg-col-a09));
--bg-col-btn-hov: oklch(from var(--bg-col-btn) l c h / 0.9);

Use the properties to style a button with a transition of background and foreground colors on hover:

button {
color: var(--fg-col-a09);
background-color: var(--bg-col-btn);
transition-property: color, background-color;
transition-duration: 1s;

&:hover {
    color: var(--fg-col-a1);
    background-color: var(--bg-col-btn-hov);
}

}

Actual results:

When cursor is hovered over the button the colors change instantly without transition. However, transition does take place when cursor is moved away from it. If light-dark() is taken out of the first property then colors transition as expected.

Expected results:

Colors should change for both mouseover and mouseleave events with a 1s transition.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::CSS Parsing and Computation' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: testcase 2 (style moved into style tag)

Looks like that first testcase had all the styles appended at the end outside of a style tag, so they didn't render/apply... let's see if it reproduces the issue if we move them into a <style> tag.

Comment 3

[Daniel Holbert [:dholbert]]

With testcase 2, I can reproduce the described issue -- Chrome smoothly transitions the color when I hover, whereas it snaps immediately in Firefox.

Comment 4

[Emilio Cobos Álvarez [:emilio]]

Seems like we might not be interpolating those correctly. Titan, any thoughts?

Comment 5

[VitDyn]

Sorry for not putting the styles under a <stylesheet> tag, it was a bit late in the day already.

What I initially thought was that FF is not resolving the final computed value at the time the transition is initiated. According to DevTools that did not seem to be the case, however, I tried a couple of things to test this anyway - assigned background-color: var(--bg-col-1-std-btn-hov, initial); and --resolved-bg-color: var(--bg-col-1-std-btn-hov); on button:hover. Neither had any effect.

However, an interesting thing I observed just now was that upon page load the button's colour is computed as expected according to DevTools - oklch(0.592255 0.181762 21.788 / 0.31), then I triggered :hov and again it resolved as expected to oklch(0.592255 0.181762 21.788 / 0.9). However, when I removed the :hov flag it resolved to color(srgb 0.832726 0.261525 0.291884 / 0.896). Is changing the colour space normal?

Comment 6

[Tiaan Louw [:tlouw]]

This turns out to be the same issue as bug 1985452. Transitions work as expected with the fix applied.