WordPress.org

Make WordPress Core

Opened 22 months ago

Closed 8 months ago

#45068 closed defect (bug) (invalid)

Specific CSS attribute slows down customizer panels on Chrome and Opera

Reported by: Themezly Owned by:
Milestone: Priority: normal
Severity: normal Version:
Component: Customize Keywords:
Focuses: Cc:

Description

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.

Change History (6)

#1 @mukesh27
22 months ago

  • Keywords reporter-feedback added

@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. Please try the support forums to get help with your site.

Version 0, edited 22 months ago by mukesh27 (next)

#2 follow-up: @Themezly
22 months ago

@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.

Last edited 22 months ago by Themezly (previous) (diff)

#3 in reply to: ↑ 2 @mukesh27
22 months ago

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.

#4 @mukesh27
22 months ago

  • Keywords dev-feedback added; reporter-feedback removed

#5 @Themezly
22 months ago

  • Keywords reporter-feedback added; dev-feedback removed

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

#6 @dlh
8 months ago

  • Keywords reporter-feedback removed
  • Milestone Awaiting Review deleted
  • Resolution set to invalid
  • Status changed from new to closed
  • Version 4.9.8 deleted

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.

Note: See TracTickets for help on using tickets.