Bug 111329 – REGRESSION (258514@main): Transition of !important property fails to animate

• Component: Animations
• Status: RESOLVED FIXED

[Daniel Trebbien]

Created attachment 191242 [details]
Test case

Please see the attached test case.  In Safari 6.0.2, Chrome 25.0.1364.152, Firefox 19.0, and IE 10, after clicking OK on the "starting" alert, the transition of background color from white to red begins and runs for 1 second until an intensive string computation starts.  While the string computation is running, no frames of the transition are painted, so the effect is that the background color jumps from a very light red to a deep red color when the string computation finishes.

Opera (version 12.14 tested) seems to be the only browser that continues to paint frames of the transition while the string computation is running.

This issue isn't as noticeable in desktop browsers as it is for mobile browsers, but it can be seen in desktop Chrome if a fair number of DOM modifications are made to set up a page of an HTML5 app.

[Daniel Trebbien]

https://bugzilla.mozilla.org/show_bug.cgi?id=847415

[Ahmad Saleem]

Safari 16.3 behavior is similar to Chrome Canary 112 while Safari Technology Preview 164 has regressed it and after clicking "Start", it just directly go to "Red" and does not have any transitions.

Firefox Nightly 112, Chrome Canary 112 & Safari 16.3 are matching but Safari Technology Preview 164 has regressed it.

[Radar WebKit Bug Importer]

<rdar://problem/105929421>

[Antoine Quint]

(In reply to Ahmad Saleem from comment #2)
> Safari 16.3 behavior is similar to Chrome Canary 112 while Safari Technology
> Preview 164 has regressed it and after clicking "Start", it just directly go
> to "Red" and does not have any transitions.
> 
> Firefox Nightly 112, Chrome Canary 112 & Safari 16.3 are matching but Safari
> Technology Preview 164 has regressed it.

Thanks for catching this Ahmad! This regressed with 258514@main.

[Antti Koivisto]

Transitions have higher precedence then !important (unlike animations).

[Antti Koivisto]

Reduced test case

<style>
#theBox {
    width: 200px;
    height: 200px;
    transition: background-color 20s;
}
.red {
    background-color: red !important;
}
</style>
<div id="theBox"></div>
<script>
document.body.offsetLeft;
theBox.className = "red";
</script>

[Antti Koivisto]

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

[Antti Koivisto]

Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/38719

[EWS]

Committed 260880@main (e0fa0f2073f1): <https://commits.webkit.org/260880@main>

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