Skip to content

Forced reflow due to reading and writing css property in a single loop #176

@martinarvaiaccedo

Description

@martinarvaiaccedo

Hey!

In the following block: https://github.com/jhildenbiddle/css-vars-ponyfill/blob/master/src/index.js#L304-L320
reads and writes are happening in the same loop which causes as many forced reflows, as many variables it will attach. Even an M2 mac can hang for 32ms, on our supported devices (Smart TVs) the same process causes a 4 second freeze when setting 20-30 variables.

m2 mac
image

Samsung Tizen 2021 (a quite performant model)
image

As a quick workaround, I applied the following patch in our project:

css-vars-ponyfill+2.4.9.patch

Samsung Tizen 2021 with the proposed fix: (from 4000ms to 91ms)
image

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions