Specific CSS attribute slows down customizer panels on Chrome and Opera

[Themezly]

CSS class declared like this

[class*='contains'] [class*='sub_contains']{...}

kills the panel switch and you start thinking that is the amount of options

Here is video showing the issue
​https://monosnap.com/file/hrdFWrFqizkx1Cxtra1TIzHdckxuSo

I was able to isolate it to this specific declaration

[class*='contains'] [class*='sub_contains']{...}

if you use this only

[class*='contains']{...}
[class*='contains'] .something {...}

or even a no space

[class*='contains'][class*='sub_contains']{...}

everything works fine.

[mukesh27]

@Themezly, Can you please share more details as i try to find this [class*='contains'] [class*='sub_contains']{...} class in wp-admin and wp-includes folder but can't fine it.

This Trac is used for enhancements and bug reporting for the WordPress core software, not for individual support questions.

[Themezly]

@mukesh27 class is not present in WP, this is related to anyone's custom CSS that is included in the page itself.
This is not individual support but it is more likely browser related than WP but it affects WP very much so. There were numerous reports of users complaining about the panels speed and how on Firefox customizer is faster. This little nugget plays huge role on rendering in Chrome. You can close the issue if you like but users should be aware of possible performance issues if .class [ANYTHING] is used within their CSS.

[mukesh27]

You mean if we use css like you have suggested then it will load customize faster?

Replying to Themezly:

@mukesh27 class is not present in WP, this is related to anyone's custom CSS that is included in the page itself.
This is not individual support but it is more likely browser related than WP but it affects WP very much so. There were numerous reports of users complaining about the panels speed and how on Firefox customizer is faster. This little nugget plays huge role on rendering in Chrome. You can close the issue if you like but users should be aware of possible performance issues if .class [ANYTHING] is used within their CSS.

[Themezly]

No it will slow it down, here is better explanation

​https://github.com/ThemeFuse/Unyson/issues/3620

basically if you add space after a class and use specific attribute lookup like

.class [data-something]

it kills the rendering because of that very little space in between the class and specific attribute

[dlh]

As mentioned in comment:2, there is no CSS in core known to cause this behavior. The theme being customized in the video is not a default theme, and the video appears to show additional CSS being added to customize.php itself. For that matter, I'm not sure I saw a significant difference in Customizer responsiveness throughout the video.

I'm going to close this ticket for those reasons, but feel free to reopen if more-specific steps to replicate the behavior in core become available.