Render issues with high CSS Custom Property usage / overrides

[brettdusek]

First, I wanted to say thank you for tackling the issue of IE11 support with CSS variables! We've been roadblocked by this for some time and your polyfill is so close getting us over the finish line with what we need.

With that said, we pulled the polyfill into our project and it does work (!); however, it renders terribly slow in IE11.. with upwards of a half second delay for the variables to trigger when there is a change (like on hover for instance). Our scenario is probably a bit different since we are exploring the idea of a fully dynamic theme with style-agnostic components.

I'm including an example from JS Bin that shows the use case and delay. This delay gets worse the more of this type of work is going on (in our case about 1/4 to 1/2 second). https://jsbin.com/vegekezago/1/edit?html,css,js,output

Is this something that can be fixed?

[nuxodin]

Hi
Phuuu, I took a little peek inside.
You use version 2.7.1 it seams version 2.7.2 is faster.
https://jsbin.com/xapumovafu/1/edit?html,css,js,output

Higher versions have problems with you code, because i changed a regexp to find "var(--x, --y)"
The new regexp fixed a other issue, bud i now see that you can no more use variables as fallback values... :/

old:

const regValueGetters = /var\(([^),]+)(\,(.+))?\)/g;

new:

const regValueGetters = /var\(([^),]+)(\,([^),]+))?\)/g;

I need a real parser / tokenizer (or a regexp-guru) to make this work...

[brettdusek]

Thanks! I adjusted the CSS to eliminate the fallback issue as a consideration here. https://jsbin.com/ruhikojaxi/1/edit

You'll notice that on hover, it still lags in applying the new value for the variable. In our project, not seeing any real noticeable change in performance between 2.7.1 and 2.7.2.

I have someone looking at your regexp to see if they might be able to help on that issue.

[sdkolbus]

Hi
Phuuu, I took a little peek inside.
You use version 2.7.1 it seams version 2.7.2 is faster.
https://jsbin.com/xapumovafu/1/edit?html,css,js,output

Higher versions have problems with you code, because i changed a regexp to find "var(--x, --y)"
The new regexp fixed a other issue, bud i now see that you can no more use variables as fallback values... :/

old:

const regValueGetters = /var\(([^),]+)(\,(.+))?\)/g;

new:

const regValueGetters = /var\(([^),]+)(\,([^),]+))?\)/g;

I need a real parser / tokenizer (or a regexp-guru) to make this work...

It's messy but it will work up to three levels:

const regValueGetters = /var\(([^),]+)(, ?(var\(([^),]+)(,([^),]+)\))?)\))?\)/g;

[nuxodin]

Thank you very mutch!
I ended in writing a little css vars-value-parser, its in my latest update.

But, can you tell me if your issue still exists?

[brettdusek]

Hi nuxodin,

I tried 3.0.0 and the performance is worse than in 2.7.2 in our case. The issue seems to be repaint performance when variable values are changing. In our project, 2.7.2 had about 1/2 second delay on any repaint/variable change, 3.0.0 on any repaint/variable change caused IE to be non-functional and ultimately I had to close the browser.

The JSBin provided might be worth testing against for release candidates as it demonstrates the repaint/variable change problem pretty well (a delay between default values and reassigned values).

Your polyfill is the only one that's even close. I'm more than happy to keep reporting back results as you release new versions.

[nuxodin]

With 3.0.1 I just fixed a bug where some dom-changes got lost. (i noticed that in your example)
Performance on my computer is actually very good...
https://jsbin.com/juhovesuqu/1/edit

[nuxodin]

Any news on this issue?
Is it better now, can i close?

[brettdusek]

Hi nuxodin. Sorry! I didn't notice your reply come through. This update is comparative to 2.7.2 performance and considerably better than 3.0.0. Unfortunately, we are still experiencing anywhere from a 1/4 sec to 1/2 sec delay in variable changes or repaints. I'm not sure what much more can be done on your end, but I'll continue to report back as new versions are released.

[nuxodin]

Hi brettdusek
I have made an update that seems to fix your problem.
https://jsbin.com/wikomosigu/1/edit

[nuxodin]

better now?

[brettdusek]

This is much better and the most performant of the versions we've tested. Happy to report this version (3.0.5) is scaling much better with heavy usage of custom properties. There is still a lag (approx. 100ms), but it's far less obtrusive. The experience may be slightly degraded for IE11 users, but its right at that level that I think may be acceptable.

The change you made is definitely getting at the problem directly, though. Great stuff!

[nuxodin]

Great, thank you for all your Feedback!