Make WordPress Core

Opened 4 years ago

Closed 4 years ago

#51706 closed defect (bug) (fixed)

Menu Navigation css Media Query - Firefox

Reported by: ravipatel's profile ravipatel Owned by: sabernhardt's profile 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 4 years ago.
51706-nav-menus.css-1.patch (368 bytes) - added by ravipatel 4 years ago.
As per comment added new patch. with removed this css.
menu-checkboxes-firefox-768px-before.png (12.9 KB) - added by sabernhardt 4 years ago.
before the patch, with one checkbox in focus
menu-checkboxes-firefox-768px-after.png (13.1 KB) - added by sabernhardt 4 years 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.


4 years ago

#2 @sabernhardt
4 years 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 4 years ago by sabernhardt (previous) (diff)

@ravipatel
4 years 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.


4 years ago

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


4 years ago

@sabernhardt
4 years ago

before the patch, with one checkbox in focus

@sabernhardt
4 years ago

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

#5 @sabernhardt
4 years 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 4 years ago by sabernhardt (previous) (diff)

#6 @sabernhardt
4 years ago

#52058 was marked as a duplicate.

#7 @SergeyBiryukov
4 years 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.