WordPress.org

Make WordPress Core

Opened 11 months ago

Closed 8 months ago

#51706 closed defect (bug) (fixed)

Menu Navigation css Media Query - Firefox

Reported by: ravipatel Owned by: sabernhardt
Milestone: 5.7 Priority: normal
Severity: normal Version:
Component: Menus Keywords: has-patch
Focuses: accessibility, css, administration Cc:

Description

https://prnt.sc/vdimjw

Please review this issue which is related to menu media query css.
I ma using firefox-win10.

Attachments (4)

51706-nav-menus.css.patch (339 bytes) - added by ravipatel 11 months ago.
51706-nav-menus.css-1.patch (368 bytes) - added by ravipatel 11 months ago.
As per comment added new patch. with removed this css.
menu-checkboxes-firefox-768px-before.png (12.9 KB) - added by sabernhardt 10 months ago.
before the patch, with one checkbox in focus
menu-checkboxes-firefox-768px-after.png (13.1 KB) - added by sabernhardt 10 months ago.
after the patch, with one checkbox in focus, showing 4 more pixels between the legend text and the first checkbox item

Download all attachments as: .zip

Change History (11)

This ticket was mentioned in Slack in #core-css by ravi. View the logs.


11 months ago

#2 @sabernhardt
11 months ago

  • Focuses accessibility added
  • Keywords needs-refresh added
  • Milestone changed from Awaiting Review to 5.7
  • Owner set to sabernhardt
  • Status changed from new to accepted
  • Version trunk deleted

Thanks @ravipatel for the ticket and patch!

I see it in Firefox/Windows as well, but not with other Windows browsers (Chrome, Edge, IE). I verified that in both trunk and 5.4.

That zero top margin was added in [38912], so the cutoff could have occurred as early as 4.7. If there is no need to keep that margin at zero, I'd recommend removing the entire selector from the mobile styles instead of re-defining the margin at 4px.

Last edited 11 months ago by sabernhardt (previous) (diff)

@ravipatel
11 months ago

As per comment added new patch. with removed this css.

This ticket was mentioned in Slack in #core-css by ravi. View the logs.


11 months ago

This ticket was mentioned in Slack in #core-css by kirstyburgoine. View the logs.


10 months ago

@sabernhardt
10 months ago

before the patch, with one checkbox in focus

@sabernhardt
10 months ago

after the patch, with one checkbox in focus, showing 4 more pixels between the legend text and the first checkbox item

#5 @sabernhardt
10 months ago

  • Keywords needs-refresh removed

@ravipatel Thanks for updating the patch!

It fixes the Firefox issue with the first checkbox's top border.

After looking at ticket:49245#comment:3, though, I think removing the overflow: hidden is a better method than changing the margins. If the overflow is not clipped, the full focus ring should show on the left side (as well as the top).

If you would like to join the conversation and/or test patches there, that would help bring both of these tickets to a resolution (and you would receive props for that, too).

Last edited 10 months ago by sabernhardt (previous) (diff)

#6 @sabernhardt
9 months ago

#52058 was marked as a duplicate.

#7 @SergeyBiryukov
8 months ago

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

In 49964:

Menus: Fix minor UI issues on Edit Menus screen on smaller viewports.

This removes extra margin from the Select button and ensures the checkboxes in the Menu Settings section are fully visible.

Props sabernhardt, passoniate, mukesh27, afercia, audrasjb, Boniu91, ravipatel, jomisica.
Fixes #49245, #51706.

Note: See TracTickets for help on using tickets.