Chrome DevTools Performance Issue when $nb-enable-css-custom-properties: true

[verenea]

Has anyone else noticed a considerable lag in the performance of their app when operating with $nb-enable-css-custom-properties set to true (which is now the default) AND having the Elements tab open in devtools? When I have it set to false, barring other side effects, the app is snappy and normal response time between Elements tab in devtools window and that of the app rendering. However, when utilizing with mixins that require css custom properties, the significance of the impact on not only the DOM, but also the comms between devtools and the browser cannot be understated. And, if we navigate away from the Elements tab (for, say, Console, Network, etc), all normal functionality is restored. It's the weirdest thing, and have yet to experience with any other library or app.

[jheimbouch]

We are seeing this exact same issue, exactly as you have described!

[scarrington76]

Definitely have seen this as well - I'd also love to see this resolved/fixed.

[GoldenxBen]

I've noticed this lately. Glad I'm not the only one!

[anazhd]

I noticed this when I migrated from Angular 10 to 13 and updated the project to Nebular 9.0.0. It's very troublesome when you just want to adjust a tiny speck of css/attributes in devtool. Disabling it, makes it at least 95% faster but still generally slower than pre-default true back then.

Luckily, I don't really need the custom ccs properties, as from my understanding, it's for runtime css changes, mostly, which I dont need. Thanks for the discovery @verenea , took me months to deconstruct until I found this.

This configurable, if mainly for runtime theme changing, I think putting it outside themes.scss would be nicer, but I don't know what's the case and logistic of enabling/disabling this property if you run it locally.

[the-vox-populi]

I have noticed this lag. It has made inspecting the styling of our app extremely cumbersome.