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 | 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)
Change History (5)
#2
@
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.
#3
@
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
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.