WordPress.org

Make WordPress Core

Opened 2 weeks ago

Last modified 4 days ago

#54210 new defect (bug)

Admin menu collapse button inactive at 960px

Reported by: Webaxones Owned by:
Milestone: 5.9 Priority: normal
Severity: normal Version: 5.8.1
Component: Administration Keywords: has-patch needs-testing
Focuses: ui, accessibility, javascript, administration Cc:

Description

If your browser is sized at 942px (942px on Chrome, 943px on Firefox) with the admin menu already collapsed, the collapse button appears to do nothing.
If user click on it, nothing happens.
And this happens because the media query targets a max-width of 960px instead of targeting 959.98px for example.
This may seem like a minor bug, but this screen dimension is exactly the one you get on a 1920px resolution screen when you ask your OS (windows for example) to display 2 browsers side by side: 2 WP admin screens with 2 buttons that don't work.

Attachments (4)

54210.patch (570 bytes) - added by sabernhardt 2 weeks ago.
ticket54210-webaxones.mp4 (2.4 MB) - added by audrasjb 2 weeks ago.
Can't reproduce the original issue on my side
BeforeFix.mp4 (2.0 MB) - added by Ankit K Gupta 10 days ago.
Status - Before fix
AfterFix.mp4 (1.3 MB) - added by Ankit K Gupta 10 days ago.
Status - After fix

Change History (17)

@sabernhardt
2 weeks ago

#1 follow-up: @sabernhardt
2 weeks ago

  • Focuses javascript added; css removed
  • Keywords has-patch added
  • Milestone changed from Awaiting Review to 5.9

Hi and thanks for the report!

The problem seems to be in the common.js file, not CSS.

viewportWidth < 960 did not include 960 pixels, so I switched the operator to less than or equal to 960.

#2 in reply to: ↑ 1 @Webaxones
2 weeks ago

Indeed. Sorry I didn't search any further because I thought the problem was unlikely to be qualified as a bug. I should have :)

Replying to sabernhardt:

Hi and thanks for the report!

The problem seems to be in the common.js file, not CSS.

viewportWidth < 960 did not include 960 pixels, so I switched the operator to less than or equal to 960.

#3 @sabernhardt
2 weeks ago

  • Keywords needs-testing added

@Webaxones That comment was (more) for other people; you did not need to know exactly where the problem was. The fact that you found a bug and reported it is plenty :)

For anyone testing the patch:

  1. Access a WordPress admin screen (page) with a desktop-sized monitor.
  2. Adjust the browser window size so the side admin menu's auto-fold feature collapses the menu. Make sure the width is only one pixel narrower than where the side menu is expanded.
  3. Click on the arrow link at the bottom to Expand Main Menu. This should not work correctly before applying the patch.
  4. Apply the patch. Verify that the JavaScript compiles correctly and is not cached.
  5. Refresh the browser at the same size.
  6. Click on the arrow link at the bottom to Expand Main Menu. Verify that the menu expands now.
Last edited 6 days ago by sabernhardt (previous) (diff)

@audrasjb
2 weeks ago

Can't reproduce the original issue on my side

#4 @audrasjb
2 weeks ago

Hmm ok thanks @sabernhardt for the sharing the testing process, now I understand why I wasn't able to reproduce the issue. I'll test again later today.

#5 @Webaxones
2 weeks ago

https://i.imgur.com/weM6mC3.gif
Here is a more telling visual demo:
On Windows, I open 2 windows, then snap the first one on the left by pressing the Windows Logo Key + Left Arrow, then snap the second one on the right by pressing the Windows Logo Key + Right Arrow.
-> Neither of the 2 collapse buttons works.

This ticket was mentioned in Slack in #core-test by boniu91. View the logs.


11 days ago

#7 @Ankit K Gupta
10 days ago

Test Report

Test Environment

  • WordPress: 5.9-alpha-51272-src
  • Browser: Google Chrome Version 94.0.4606.61 (Official Build) (x86_64)
  • OS: macOS Big Sur V 11.5.1
  • Theme: Twenty Twenty-One
  • Web Server: nginx
  • PHP & MySQL: 8.0.0 & 8.0.16
  • Console Log: All fine
  • WP Debug Log: All fine.

Steps to Test

  1. Go to WP Dashboard.
  2. Right click and click on the 'Inspect'option.
  3. Click on kebab menu(three dots) and select 'Dock to right' option.
  4. Now click on browser resizer option.
  5. Select Dimensions 'Responsive'
  6. Change the width to 960.
  7. Click on 'Expand' menu icon.
  8. This action will do nothing on click.
  9. Apply patch file and build all assets.
  10. Click on 'Expand'icon.
  11. Menu will expand/collapse as expected.

Test Results

Menu Expand/Collaps actions are working expected on screen size 960px.

Test Status

Pass(on Mac)

PS: Would be great if someone also check once on Windows machine.

ScreenCast (videos)

Attached.

@Ankit K Gupta
10 days ago

Status - Before fix

@Ankit K Gupta
10 days ago

Status - After fix

#8 @Ankit K Gupta
10 days ago

Hello @Webaxones
Warm welcome on Trac and Thanks for creating the ticket :)

This ticket was mentioned in Slack in #core-test by ankit-k-gupta. View the logs.


10 days ago

#10 @abesell132
6 days ago

This issue seems to be more widespread than just the admin menu. A similar bug can be replicated on the front end. Drop this code into any page or post to replicate:

<div id="change">This starts blue and turns red below 1400px</div>
<style>
    #change {color: blue;}

    @media only screen and (max-width:1400px) { #change { color: red;} }
</style>

From a screen width of 1384px to 1920px the color is blue. The 1400px max-width media query doesn't kick in until 1383px. (The text turns red 17 pixels late)

Test Environment
WP Version: 5.8.1
PHP Version: 7.3
Browser: All of em'
Theme: Twenty Twenty One
Web Server: Apache
Logs: Nothing

#11 @sabernhardt
6 days ago

@abesell132 When the media query style change starts acting at about 17 pixels less than the breakpoint value, that likely is because browsers include the scrollbar within that number. If the page does not have enough content to involve scrolling, however, then the window width should match the media query max-width.

#12 @sabernhardt
6 days ago

  • Summary changed from Admin collapse button inactive due to a media query incorrectly targeting a breakpoint to Admin menu collapse button inactive at 960px

This ticket was mentioned in Slack in #core by audrasjb. View the logs.


4 days ago

Note: See TracTickets for help on using tickets.