Twenty Thirteen: Issues with dropdown menu on iPad when logged in as admin

[ricardomediaversa]

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.

• ​support topic with same issue with Twenty Twelve theme
• in that same topic ​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.

[ricardomediaversa]

Screenshot taken on the iPad

[lancewillett]

Thanks for the detailed report, Ricardo.

[obenland]

As noted in above comment, discussed in IRC.

We could not reproduce the error so far. ricardomediaversa is it possible that it might be rooted in something specific to your site?
Is it something that worked in 3.9 but stopped working in 3.9.1?

[ricardomediaversa]

Replying to obenland:

As noted in above comment, discussed in IRC.

We could not reproduce the error so far. ricardomediaversa is it possible that it might be rooted in something specific to your site?
Is it something that worked in 3.9 but stopped working in 3.9.1?

I've outruled that by testing a clean install of WordPress 3.9.1 on multiple servers of us, so it doesn't seem a site specific site.
Also I've tested it on some existing sites of us and the same issue occured on them too.

Also I've made some more installations of WordPress to do some more testing.

• WordPress 3.9.1, Twenty Thirteen theme, issue occurs
• WordPress 3.9.1, Twenty Twelve theme, issue occurs
• WordPress 3.9, Twenty Thirteen theme, issue occurs
• WordPress 3.9, Twenty Twelve theme, issue occurs
• WordPress 3.8, Twenty Thirteen theme, issue occurs
• WordPress 3.8, Twenty Twelve theme, issue does not occur
• WordPress 3.7, Twenty Thirteen theme, issue occurs
• WordPress 3.7, Twenty Twelve theme, issue does not occur
• WordPress 3.6, Twenty Thirteen theme, issue occurs
• WordPress 3.6, Twenty Twelve theme, issue does not occur

So the issue seems to be introduced in 3.9 for the Twenty Twelve theme but the Twenty Thirteen theme already has the issue further back.
What is the first WordPress version that comes with the Twenty Thirteen theme?

[obenland]

Replying to ricardomediaversa:

What is the first WordPress version that comes with the Twenty Thirteen theme?

Twenty Thirteen was released in 3.6.

[obenland]

This is ​the changeset from 1.3 to 1.4 for Twenty Twelve, and it has a bunch of changes to the nav menu. Would you mind retesting Twenty Twelve 1.3 with WordPress 3.9? If the issue does not occur for you, we can circle in on the changes we've made to determine a cause.

​Download Twenty Twelve 1.3.

[ricardomediaversa]

Replying to obenland:

This is ​the changeset from 1.3 to 1.4 for Twenty Twelve, and it has a bunch of changes to the nav menu. Would you mind retesting Twenty Twelve 1.3 with WordPress 3.9? If the issue does not occur for you, we can circle in on the changes we've made to determine a cause.

​Download Twenty Twelve 1.3.

I was not aware that I could find theme versions too so the list I've provided before missed those version numbers.
It seems like the 3.9 installation has Twenty Twelve 1.3 by default instead of 1.4 so it probably isn't in the 1.3 to 1.4 changeset.
I've tried upgrading the theme to 1.4 to test but the same issue occured.
Here's the updated list with the theme version numbers.

• WordPress 3.9.1, Twenty Thirteen 1.2 theme, issue occurs
• WordPress 3.9.1, Twenty Twelve 1.4 theme, issue occurs
• WordPress 3.9, Twenty Thirteen 1.1 theme, issue occurs
• WordPress 3.9, Twenty Twelve 1.4 theme, issue occurs
• WordPress 3.9, Twenty Twelve 1.3 theme, issue occurs
• WordPress 3.8, Twenty Thirteen 1.1 theme, issue occurs
• WordPress 3.8, Twenty Twelve 1.3 theme, issue does not occur
• WordPress 3.7, Twenty Thirteen 1.1 theme, issue occurs
• WordPress 3.7, Twenty Twelve 1.3 theme, issue does not occur
• WordPress 3.6, Twenty Thirteen 1.0 theme, issue occurs
• WordPress 3.6, Twenty Twelve 1.2 theme, issue does not occur

[lancewillett]

Tested this today and could not repeat -- neither in Twenty Thirteen nor Twenty Twelve, with iPad Mini 3rd generation + Mobile Safari on ​http://themebuster.wordpress.net/ test site.

I think we can close as fixed. If you are able to repeat the bug still with the current versions of the themes in trunk ( WordPress version 4.2 Beta 3 ) -- please re-open with details.