Bug 170708 - getComputedStyle() can be incorrect when using CSS Custom Properties
Summary: getComputedStyle() can be incorrect when using CSS Custom Properties
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 10
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL: http://jsbin.com/ginegud/12/edit?html...
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2017-04-10 16:41 PDT by Daniel Freedman
Modified: 2022-08-06 18:45 PDT (History)
7 users (show)

See Also:

Attachments
Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Daniel Freedman 2017-04-10 16:41:11 PDT 
getComputedStyle of a node can be incorrect when that node uses CSS Custom Properties and an ancestor node which sets CSS Custom Properties is modified.

Example: http://jsbin.com/ginegud/12/edit?html,console,output

This example modifies the values of `--border` based on the class selector `.switch`, synchronously calls `getComputedStyle()`, and prints the value of `border-top-width` in the cases of
1) before adding the class `switch`
2) synchronously after adding the class `switch`
3) synchronously removing the class `switch`

Expected:
2px
10px
2px

Actual:
2px
2px
2px
Comment 1 Radar WebKit Bug Importer 2017-04-10 21:16:51 PDT 
<rdar://problem/31549434>
Comment 2 Ahmad Saleem 2022-08-06 18:44:44 PDT 
I am able to reproduce this issue in Safari 15.6 on macOS 12.5 using below mentioned "JSBin":

*** Safari 15.6 on macOS 12.5 ***

"2px"
"2px"
"2px"

*** Chrome Canary 106 ***

"2px"
"10px"
"2px"

*** Firefox Nightly 105 ***

"2px"
"10px"
"2px"