WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 5 years ago

Last modified 5 years ago

#35649 closed defect (bug) (fixed)

Customizer: spinner animated GIF and high CPU usage

Reported by: afercia Owned by: afercia
Milestone: 4.5 Priority: normal
Severity: normal Version:
Component: Customize Keywords: has-patch has-screenshots
Focuses: ui, performance Cc:

Description

As a best practice and as already done for the Theme Installer and the ThickBox modal, see tickets 33322 and 33311, when the spinner animated GIF is used as a background image, the element the background is applied to should be promoted to a new layer and the re-painted area should be reduced to the smallest possible one.

#customize-container and #customize-preview should just reuse the same CSS used for the Theme Installer.

Attachments (3)

35649.patch (2.1 KB) - added by afercia 5 years ago.
35649.2.patch (2.1 KB) - added by afercia 5 years ago.
35649.3.patch (2.2 KB) - added by afercia 5 years ago.

Download all attachments as: .zip

Change History (12)

@afercia
5 years ago

#1 @afercia
5 years ago

  • Keywords has-patch has-screenshots added
  • Owner set to afercia
  • Status changed from new to assigned

First pass. In the screenshots below, the re-painted area in Chrome before and after the patch.
@celloexpressions should #customize-container keep a white background or this would be an opportunity to change it to #f1f1f1 as the standard background color?

https://cldup.com/iUslWHbtw1.png

https://cldup.com/jqyOvTINaD.png

#2 @afercia
5 years ago

Note: same solution was used also for the authentication modal dialog in #34951.

@afercia
5 years ago

#3 @afercia
5 years ago

When the Customizer is loaded through the "customize container", the quick change from a white background to a gray background doesn't look so nice to me, see below. I'd propose to change the white in the standard #f1f1f1 background color.

https://cldup.com/ldBvIcTlDZ.gif

@afercia
5 years ago

#4 @afercia
5 years ago

For consistency, I'd propose to make also the Theme Installer preview background #f1f1f1.

This ticket was mentioned in Slack in #core-customize by afercia. View the logs.


5 years ago

#6 @afercia
5 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 36518:

Customizer: reduce the spinner re-painted area to the smallest possible one.

Also, changes the "customize container" and the theme installer preview
background from white to the default body #f1f1f1 background.

Fixes #35649.

#7 follow-up: @celloexpressions
5 years ago

Sorry about the late reply, but yes, the #f1f1f1 is definitely better.

#8 in reply to: ↑ 7 @afercia
5 years ago

Replying to celloexpressions:

Sorry about the late reply, but yes, the #f1f1f1 is definitely better.

Thanks @celloexpressions worth noting in the Theme Installer there's still a white background visible for Internet Explorer and Edge users but that's caused by a different issue, the "white flash while iframe loads", see https://css-tricks.com/prevent-white-flash-iframe/

This ticket was mentioned in Slack in #core by afercia. View the logs.


5 years ago

Note: See TracTickets for help on using tickets.