WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 3 years ago

#20502 closed defect (bug) (fixed)

Admin menu glitch with pending comments count bubble

Reported by: ocean90 Owned by: azaozz
Milestone: 3.5 Priority: low
Severity: normal Version: 3.2
Component: UI Keywords: has-patch commit
Focuses: Cc:

Description

I notices this on wpdevel with German translation and a huge number of pending comments:

http://f.cl.ly/items/1d0o1g0Y0U3v1M032i0e/Bildschirmfoto%202012-04-21%20um%2012.32.22.png

z-index of the arrow is 25, if we set it to 26 for the bubble it looks good.

Attachments (10)

20502.patch (356 bytes) - added by ocean90 3 years ago.
20502.before.png (4.3 KB) - added by SergeyBiryukov 3 years ago.
20502.after.png (4.4 KB) - added by SergeyBiryukov 3 years ago.
20502.hover.before.png (3.8 KB) - added by SergeyBiryukov 3 years ago.
20502.2.patch (378 bytes) - added by SergeyBiryukov 3 years ago.
20502.hover.after.png (3.9 KB) - added by SergeyBiryukov 3 years ago.
20502.3.patch (496 bytes) - added by SergeyBiryukov 3 years ago.
20502.arrow.png (14.1 KB) - added by SergeyBiryukov 3 years ago.
20502.4.patch (525 bytes) - added by SergeyBiryukov 3 years ago.
20502.5.patch (954 bytes) - added by SergeyBiryukov 3 years ago.

Download all attachments as: .zip

Change History (24)

@ocean903 years ago

comment:1 @ocean903 years ago

  • Milestone changed from Awaiting Review to 3.5

comment:2 @SergeyBiryukov3 years ago

  • Keywords commit added

Looks better in Russian version as well (attachment:20502.after.png).

@SergeyBiryukov3 years ago

@SergeyBiryukov3 years ago

comment:3 @azaozz3 years ago

  • Owner set to azaozz
  • Resolution set to fixed
  • Status changed from new to closed

In [21283]:

Admin menu: add z-index to the pending/updates count bubbles, props ocean90, fixes #20502

@SergeyBiryukov3 years ago

comment:4 @SergeyBiryukov3 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

This is still an issue on hover due to .menu-top:hover .wp-menu-arrow having z-index of 1001:
http://core.trac.wordpress.org/browser/tags/3.4.1/wp-admin/css/wp-admin.dev.css#L1506

Last edited 3 years ago by SergeyBiryukov (previous) (diff)

comment:5 @markoheijnen3 years ago

Shouldn't we create some kind of guidelines for the value of z-index. Having the need of a z-index of 1000 seems weird to me

comment:6 @SergeyBiryukov3 years ago

  • Keywords ui-feedback added

comment:7 @SergeyBiryukov3 years ago

Used to be 1500 (introduced in [18621]), reduced to 1001 in [18901].

comment:8 @helenyhou3 years ago

I don't know if we can really define a hard guideline/rule for z-index values, but we should definitely be making and reviewing patches that involve z-index without inflating the values too much. 1000 for a z-index isn't uncommon, though, especially if you're potentially competing with plugin/theme-added CSS.

comment:9 @markoheijnen3 years ago

I don't know it either but I'm just curious if we can. A z-index of 1000 is default for the jQuery dialog. So given a z-index of 1500 to the count bubble will make this look weird. You can fix this with setting a higher z-index for the dialog. At that point no matter what, you are potentially competing with other CSS code.

Another reason I asked was because of the hugh z-index on the adminbar (99999).

@SergeyBiryukov3 years ago

comment:10 @SergeyBiryukov3 years ago

Seems that a high z-index on li.menu-top:hover .wp-menu-arrow is needed to correspond with the one on .wp-submenu, which is 999:
http://core.trac.wordpress.org/browser/tags/3.4.1/wp-admin/css/wp-admin.dev.css#L1327

However 20502.2.patch would cause the same issue as in #20300.

Here's another idea: since z-index only makes the difference here when there's a submenu, 20502.3.patch adds .wp-has-submenu to the related selectors.

comment:11 @lessbloat3 years ago

  • Keywords ui-feedback removed

I tested this (sorry, to clarify - I tested 20502.3.patch). The patch looks good.

Last edited 3 years ago by lessbloat (previous) (diff)

@SergeyBiryukov3 years ago

@SergeyBiryukov3 years ago

@SergeyBiryukov3 years ago

comment:13 @SergeyBiryukov3 years ago

[21574] fixed the hover bubble glitch (20502.hover.before.png).

However, there's another glitch now:

  1. Go to "Posts" screen.
  2. Click "Comments" menu item.
  3. The arrow briefly appears (20502.arrow.png) and disappears again before the page opens.
  4. If "Comments" is focused by tabbing (or by clicking it and moving the cursor away from the item while the mouse button is still pressed), the arrow persists. It looks unnecessary there, since "Comments" item doesn't have a submenu.

20502.4.patch fixes that.

20502.5.patch also reorders the rules to more closely match the block in line 1543.

comment:14 @azaozz3 years ago

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

In [21631]:

Fix admin menu glitch with pending count bubbles, props SergeyBiryukov, fixes #20502

Note: See TracTickets for help on using tickets.