WordPress.org

Make WordPress Core

Opened 18 months ago

Last modified 18 months ago

#36911 new defect (bug)

Customizer and Theme Installer spinners should have different z-index

Reported by: afercia Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 4.5
Component: Customize Keywords: has-patch needs-testing
Focuses: ui 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 18 months ago.

Download all attachments as: .zip

Change History (4)

#1 @afercia
18 months 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
18 months 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
18 months ago

#3 @afercia
18 months 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
Note: See TracTickets for help on using tickets.