[wp-trac] [WordPress Trac] #28716: Twenty Thirteen: Issues with dropdown menu on iPad when logged in as admin (was: Issues with dropdown menu in Twenty Thirteen theme on iPad when logged in as admin)

[WordPress Trac]

#28716: Twenty Thirteen: Issues with dropdown menu on iPad when logged in as admin
-------------------------------+----------------------------------------
 Reporter:  ricardomediaversa  |       Owner:
     Type:  defect (bug)       |      Status:  new
 Priority:  normal             |   Milestone:  Awaiting Review
Component:  Bundled Theme      |     Version:  3.9.1
 Severity:  normal             |  Resolution:
 Keywords:                     |     Focuses:  accessibility, javascript
-------------------------------+----------------------------------------
Changes (by SergeyBiryukov):

 * focuses:  accessibility, javascript, administration => accessibility,
     javascript
 * component:  General => Bundled Theme


Old description:

> '''Are you using either the latest version of WordPress, or the latest
> development version?'''
> Using the latest version of WordPress. (WordPress 3.9.1 running Twenty
> Thirteen theme.)
>
> '''What steps should be taken to consistently reproduce the problem?'''
> 1. Install a fresh installation of the latest version of WordPress
> (3.9.1) and log in as admin
> 2. Select Twenty Thirteen theme
> 3. Add item + sub-items to menu
> 4. Open on iPad and log in as admin (I have tested in Safari on an iPad 2
> (v7.1.2))
> 5. Click the menu item and the sub menu should open (note: the sub menu
> will show, hide and show again, believed to be related to the bug)
> 6. Click the first item in the submenu (it doesn't work but sometimes if
> you click in the lower part of the submenu item it actually triggers a
> click on the item behind the submenu item)
>
> '''Does the problem occur even when you deactivate all plugins and use
> the default theme?'''
> Yes, I've first noticed this bug on a different WordPress site but after
> finding out that the issue is in the core I tested it on a clean install
> and noticed the same issue.
>
> '''In case it's relevant to the ticket, what is the expected output or
> result?''' What did you see instead?
> Expected result: Link of submenu item is opened.
> See instead: Click seems to go through the item and nothing happens or if
> there is a link behind it is clicked instead.
>
> '''Please provide any additional information that you think we'd find
> useful.'''
> Looking at older tickets it seems that this issue has been going around
> for a while now, in older versions of WordPress and also with the Twenty
> Twelve theme.
> [http://wordpress.org/support/topic/drop-down-menu-doesnt-work-on-ipad
> support topic with same issue with Twenty Twelve theme]
> [http://wordpress.org/support/topic/drop-down-menu-doesnt-work-on-
> ipad#post-4962494 in that same topic someone has commented about
> experiencing the same issue with the Twenty Thirteen theme]
> [https://core.trac.wordpress.org/ticket/27584 there also has been a
> ticket about this issue before, which was closed with resolution
> "worksforme"]
>
> Those topics probably were closed because they couldn't reproduce the
> problem because it only occurs when the admin bar is showing.
>
> What I've found out is that it has something to do with adding an event
> listener to the touchstart in admin-bar.js.
>
> Commenting out the following will fix the menu (but stop submenus closing
> in the admin-bar menu)
> In wp-includes/js/admin-bar.js from line 43 to 46:
> {{{
> $(document.body).on( mobileEvent+'.wp-mobile-hover', function(e) {
>         if ( !$(e.target).closest('#wpadminbar').length )
>                 adminbar.find('li.menupop.hover').removeClass('hover');
> });
> }}}
>
> Note: The issue has nothing to do with the stuff that's nested in the
> anonymous function, the problem already occurs when binding to the event,
> so this will still cause the issue:
> {{{
> $(document.body).on( mobileEvent+'.wp-mobile-hover', function(e) {});
> }}}
>
> I've attached a screenshot for reference of how I've build up the menu.
> When trying to click the first sub-menu item "Sample Page" it will do
> nothing or when clicking in the lower area of the first sub-menu item it
> will actually click the "Hello World!" behind it.

New description:

 '''Are you using either the latest version of WordPress, or the latest
 development version?'''
 Using the latest version of WordPress. (WordPress 3.9.1 running Twenty
 Thirteen theme.)

 '''What steps should be taken to consistently reproduce the problem?'''
 1. Install a fresh installation of the latest version of WordPress (3.9.1)
 and log in as admin
 2. Select Twenty Thirteen theme
 3. Add item + sub-items to menu
 4. Open on iPad and log in as admin (I have tested in Safari on an iPad 2
 (v7.1.2))
 5. Click the menu item and the sub menu should open (note: the sub menu
 will show, hide and show again, believed to be related to the bug)
 6. Click the first item in the submenu (it doesn't work but sometimes if
 you click in the lower part of the submenu item it actually triggers a
 click on the item behind the submenu item)

 '''Does the problem occur even when you deactivate all plugins and use the
 default theme?'''
 Yes, I've first noticed this bug on a different WordPress site but after
 finding out that the issue is in the core I tested it on a clean install
 and noticed the same issue.

 '''In case it's relevant to the ticket, what is the expected output or
 result?''' What did you see instead?
 Expected result: Link of submenu item is opened.
 See instead: Click seems to go through the item and nothing happens or if
 there is a link behind it is clicked instead.

 '''Please provide any additional information that you think we'd find
 useful.'''
 Looking at older tickets it seems that this issue has been going around
 for a while now, in older versions of WordPress and also with the Twenty
 Twelve theme.
 * [http://wordpress.org/support/topic/drop-down-menu-doesnt-work-on-ipad
 support topic with same issue] with Twenty Twelve theme
 * in that same topic [http://wordpress.org/support/topic/drop-down-menu-
 doesnt-work-on-ipad#post-4962494 someone has commented] about experiencing
 the same issue with the Twenty Thirteen theme
 * there also has been a ticket about this issue before, which was closed
 with resolution "worksforme": #27584

 Those topics probably were closed because they couldn't reproduce the
 problem because it only occurs when the admin bar is showing.

 What I've found out is that it has something to do with adding an event
 listener to the touchstart in admin-bar.js.

 Commenting out the following will fix the menu (but stop submenus closing
 in the admin-bar menu)
 In wp-includes/js/admin-bar.js from line 43 to 46:
 {{{
 $(document.body).on( mobileEvent+'.wp-mobile-hover', function(e) {
         if ( !$(e.target).closest('#wpadminbar').length )
                 adminbar.find('li.menupop.hover').removeClass('hover');
 });
 }}}

 Note: The issue has nothing to do with the stuff that's nested in the
 anonymous function, the problem already occurs when binding to the event,
 so this will still cause the issue:
 {{{
 $(document.body).on( mobileEvent+'.wp-mobile-hover', function(e) {});
 }}}

 I've attached a screenshot for reference of how I've build up the menu.
 When trying to click the first sub-menu item "Sample Page" it will do
 nothing or when clicking in the lower area of the first sub-menu item it
 will actually click the "Hello World!" behind it.

--

--
Ticket URL: <https://core.trac.wordpress.org/ticket/28716#comment:1>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform