WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 3 years ago

Last modified 3 years ago

#19119 closed defect (bug) (fixed)

Admin menu flyouts are one pixel off when collapsed

Reported by: olleicua Owned by: koopersmith
Milestone: 3.3 Priority: normal
Severity: normal Version: 3.3
Component: UI Keywords: has-patch
Focuses: Cc:

Description

In Revision #19118 admin menu flyouts are 1 pixel too low when the menu is collapsed. See attachment. This is consistent in Firefox, Safari, and Chrome.

Attachments (7)

collapsedFlyoutBug.png (53.4 KB) - added by olleicua 3 years ago.
19119.fix.patch (482 bytes) - added by olleicua 3 years ago.
19119.2.patch (368 bytes) - added by SergeyBiryukov 3 years ago.
19119.3.patch (497 bytes) - added by trepmal 3 years ago.
fixes offset on current menu item and menu item below it
19119.diff (356 bytes) - added by helenyhou 3 years ago.
wp-admin.dev.css.diff (748 bytes) - added by trepmal 3 years ago.
should fix both issues I just mentioned
bug.png (29.1 KB) - added by olleicua 3 years ago.

Download all attachments as: .zip

Change History (28)

@olleicua3 years ago

comment:1 @nacin3 years ago

  • Milestone changed from Awaiting Review to 3.3
  • Summary changed from admin menu flyouts to Admin menu flyouts are one pixel off when collapsed

@olleicua3 years ago

comment:2 @olleicua3 years ago

  • Keywords has-patch needs-testing added

Fixed, looks much better. Doesn't break non-collapsed view.

@SergeyBiryukov3 years ago

comment:3 @SergeyBiryukov3 years ago

Probably would be better to decrease margin-top (19119.2.patch).

@trepmal3 years ago

fixes offset on current menu item and menu item below it

comment:4 @olleicua3 years ago

2 ruins the current sub-menu. 3 looks perfect.

@helenyhou3 years ago

comment:5 @helenyhou3 years ago

19119.diff is the middle ground between SergeyBiryukov and trepmal's patches.

comment:6 follow-up: @trepmal3 years ago

That causes a pixel offset on the flyout below the current item

http://cl.ly/Bap2/offset.png

comment:7 in reply to: ↑ 6 @helenyhou3 years ago

Replying to trepmal:

Ah true. Missed that case.

comment:8 @olleicua3 years ago

I'm pretty sure 19119.3.patch is correct.

comment:9 @nacin3 years ago

Fixed in [19277]?

comment:10 @trepmal3 years ago

Not quite, pixel offset on current item's flyout and flyout of item directly below the current item (see screenshot above) still present in r19277 (and r19278)

comment:11 @koopersmith3 years ago

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

In [19279]:

Fix folded flyout overlaps for current items. props trepmal. fixes #19119.

comment:12 @trepmal3 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

Seems my selector was a bit too specific - if the current item doesn't have a submenu, the pixel offset still happens with the flyout below.

Also, hoverstate on the current item with no submenu isn't right. Following the unfolded style, it shouldn't change on hover .

Probably not necessary, but here's a short (8s) screencast that shows both quirks
http://screencast.com/t/VeGYxhwyPk2

@trepmal3 years ago

should fix both issues I just mentioned

@olleicua3 years ago

comment:13 @olleicua3 years ago

Was [19119/wp-admin.dev.css.diff] intended to be applied on top of your other patch because if not then it doesn't seem to be fixing the problem for me:


comment:14 @trepmal3 years ago

Hmm.... Just double-checked the patch and it worked for me.

To be sure, I deleted my wp-admin(.dev).css files, svn up'd and applied the patch.

comment:15 @olleicua3 years ago

For some reason I am seeing this bug in FF7 in all four of the following circumstances:

  • right after svn up'ing, no patches
  • right after svn up'ing and applying just patch 3
  • right after svn up'ing and applying just wp-admin.dev.css.diff
  • right after svn up'ing and applying patch 3 then wp-admin.dev.css.diff

not sure what's going on here..

comment:16 @olleicua3 years ago

Figured it out. I had reduced the font size in my browser. When I restored it to the normal size everything worked as expected. Not sure how many people actually change their font size in FF frequently while trying to use the WP admin but it seems to severely break the admin bar in other ways too. Anyway not the point of this ticket so pretend I said nothing.

comment:17 @ocean903 years ago

trepmal, is it still an issue?

comment:18 @trepmal3 years ago

Partially fixed, the pixel offset seems to be fixed. But the hoverstate problem is still there

Also, hoverstate on the current item with no submenu isn't right. Following the unfolded style, it shouldn't change on hover .

If comments (a menu item without submenu items) is the current item, the arrow is visible but disappears on mouseover.

If needed, I can create a new ticket for this since it's not part of the original issue reported here.

comment:19 @ocean903 years ago

  • Keywords needs-testing removed
  • Resolution set to fixed
  • Status changed from reopened to closed

trepmal, that is correct behavior.

We had a long discussion on this in IRC, see
https://irclogs.wordpress.org/chanlog.php?channel=wordpress-dev&day=2011-11-08&sort=asc#m329457

comment:20 @trepmal3 years ago

Okay, it just doesn't give the impression of being intentional to me. Especially since in the unfolded menu there is no change on mouseover.

Note: See TracTickets for help on using tickets.