Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Navigation menubar example: Clicking menu item scrolls page to top in Chrome #1307

Closed
JAWS-test opened this issue Jan 24, 2020 · 7 comments · Fixed by #1308
Closed

Navigation menubar example: Clicking menu item scrolls page to top in Chrome #1307

JAWS-test opened this issue Jan 24, 2020 · 7 comments · Fixed by #1308
Assignees
@a11ydoer
Labels
bug Code defects; not for inaccurate prose Example Page Related to a page containing an example implementation of a pattern
Milestone
1.2 Release 1

Comments

@JAWS-test
Copy link

When I click on a main menu item in Chrome, the page is scrolled to the top of the page. Depending on the display size of my device, the menu is no longer visible.

With Chrome on mobile device (Android) there is also the problem that after clicking on a menu item the font size of the menu items changes (they get much bigger).

Both problems do not occur with Safari, IE, Firefox.

Unfortunately I have not been able to find out the cause of the problems.
@JAWS-test JAWS-test mentioned this issue Jan 24, 2020
Merged
@carmacleod
Copy link
Contributor

The "scroll to top" sounds like a missing event.preventDefault() on a repurposed anchor element.
Does the problem happen for you with menubar2?

carmacleod added a commit that referenced this issue Jan 24, 2020
@carmacleod
Fixes the scroll-to-top problem in issue #1307
b5a9b20
@carmacleod
Copy link
Contributor

I was able to replicate the "scroll to top" behavior and provide a fix.
Here's a preview link if you would like to try it.

@JAWS-test
Copy link
Author

JAWS-test commented Jan 24, 2020 •
edited
Loading

Does the problem happen for you with menubar2?

No. Thanks for fixing! I tried it - the problem is solved

@mcking65 mcking65 added bug Code defects; not for inaccurate prose Example Page Related to a page containing an example implementation of a pattern labels Jan 26, 2020
@mcking65 mcking65 added this to the 1.2 Release 1 milestone Jan 26, 2020
@mcking65 mcking65 changed the title Page with menu is scrolled to the beginning after clicking on menu item (Chrome) Navigation menubar example: Clicking menu item scrolls page to top in Chrome Jan 26, 2020
@carmacleod carmacleod mentioned this issue Jan 26, 2020
Merged
3 tasks
mcking65 added a commit that referenced this issue Feb 5, 2020
@carmacleod @mcking65
Navigation menubar: Fix scroll-to-top problem for issue 1307 (pull #1308
4667318 
)

Issue #1307 reported 2 problems with the navigation menubar example.
This commit resolves the scroll to top issue by
preventing menuitem anchor elements from jumping to href="#" (i.e. top of page in Chrome) if they have a menu/submenu.

Co-authored-by: Matt King <a11yThinker@Gmail.com>
michael-n-cooper pushed a commit that referenced this issue Feb 5, 2020
@mcking65
Generated by TRAVIS-CI 4667318
10441ca 
Navigation menubar: Fix scroll-to-top problem for issue 1307 (pull #1308)

Issue #1307 reported 2 problems with the navigation menubar example.
This commit resolves the scroll to top issue by
preventing menuitem anchor elements from jumping to href="#" (i.e. top of page in Chrome) if they have a menu/submenu.

Co-authored-by: Matt King <a11yThinker@Gmail.com>
@a11ydoer
Copy link
Contributor

a11ydoer commented Feb 22, 2020 •
edited
Loading

@mcking65 I reviewed the issue and we can close it.

@a11ydoer a11ydoer self-assigned this Feb 22, 2020
@carmacleod
Copy link
Contributor

@a11ydoer
Is the Android problem fixed, too? I don't have an Android device. Here's what @JAWS-test said:

With Chrome on mobile device (Android) there is also the problem that after clicking on a menu item the font size of the menu items changes (they get much bigger).

@a11ydoer
Copy link
Contributor

a11ydoer commented Apr 9, 2020 •
edited
Loading

@carmacleod

Finally, I got an Android phone, Version Android 9, to test the reported problem.

Navigation Menubar Test URL since this was merged to Master branch.

Before touch
menubar before touch

With touch
blowup_menubar_withtouch

@jongund
Copy link
Contributor

jongund commented Apr 10, 2020

@a11ydoer
This is the latest preview link that should be used for testing:
https://raw.githack.com/w3c/aria-practices/issue1357-navigation-menubar-js/examples/menubar/menubar-navigation.html

I believe this issue was fixed along time ago, I don't see the reported behavior in the current example.

@carmacleod carmacleod linked a pull request May 26, 2020 that will close this issue
Navigation menubar: Fix scroll-to-top problem reported in issue #1307 #1308
Merged
3 tasks
@jongund jongund closed this as completed Jul 17, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@a11ydoer a11ydoer

Labels
bug Code defects; not for inaccurate prose Example Page Related to a page containing an example implementation of a pattern
Projects
Menu, Menubar, and Menu Button patterns and examples development project
Status: Complete
Milestone
1.2 Release 1
Development

Successfully merging a pull request may close this issue.

Navigation menubar: Fix scroll-to-top problem reported in issue #1307 w3c/aria-practices
5 participants
@jongund @carmacleod @mcking65 @a11ydoer @JAWS-test