Make WordPress Core

Opened 8 years ago

Last modified 3 years ago

#36911 new defect (bug)

Customizer and Theme Installer spinners should have different z-index

Reported by: afercia's profile afercia Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 4.5
Component: Customize Keywords: has-patch needs-testing
Focuses: ui, css Cc:

Description

My bad, I think this has to do with some previous changes I've made on these spinners. Looks like after [36518] the "loading" spinner in the Customizer is hidden, at least in some browsers.

While the spinners used in the Customizer and in the Theme installer are basically the same and so the CSS rule for them was grouped in just one rule in [36518], I think the only CSS property that has to be different is z-index. As far as I see, the Theme installer needs a value of -1 but this will hide the spinner in the Customizer so it has to be 0 here.

The fix would be trivial but I'd greatly appreciate some testing to confirm the issue, in different browsers.

Attachments (1)

36911.patch (754 bytes) - added by afercia 8 years ago.

Download all attachments as: .zip

Change History (5)

#1 @afercia
8 years ago

Opacity (on the iframe) and transform (on the spinner) can create new stacking contexts so I'd be inclined to simplify. Don't see a good reason for all the z-index used here.

#2 @celloexpressions
8 years ago

  • Keywords needs-patch added

Yeah, the z-index situation here is pretty messy, so it's hard to tell what should be necessary vs. excessive.

@afercia
8 years ago

#3 @afercia
8 years ago

  • Keywords has-patch needs-testing added; needs-patch removed

In the proposed patch, a minimal approach that removes z-index where not necessary. The spinner is now a CSS pseudo element natively stacked above the full overlay and below the iframe. No need for z-index. As far as I've tested, should work in all browser except the Theme installer in IE because IE doesn't allow iframe transparency when the iframe src attribute is set to an external domain.

Places where to check the patch:

  • the "customize container" which opens for example when clicking "Customize" on the currently active theme in "Themes" (actually there are 2 spinners here, the first one initially displayed in the center of the page and then a second one in the right frame preview)
  • the standard Customizer right frame preview, for example clicking "Customize" on the toolbar from the front end
  • the Theme installer (Themes > Add New > Details & Preview on any theme and then browse themes

#4 @celloexpressions
3 years ago

  • Focuses css added
  • Milestone set to Future Release

This patch needs testing and careful CSS review to move forward.

Note: See TracTickets for help on using tickets.