Admin menu glitch with pending comments count bubble

[ocean90]

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

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

[SergeyBiryukov]

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

[azaozz]

In [21283]:

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

[SergeyBiryukov]

This is still an issue on hover for non-current items due to .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

[markoheijnen]

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

[SergeyBiryukov]

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

[helenyhou]

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.

[markoheijnen]

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).

[SergeyBiryukov]

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.

[lessbloat]

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

[nacin]

20502.3.patch​?

[SergeyBiryukov]

[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.

[azaozz]

In [21631]:

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