Twenty Twelve: submenu links broken on tablets

[obenland]

From ​http://en.forums.wordpress.com/topic/dropdown-menu-not-working-on-nexus-7?replies=4#post-1334102

When a menu has subitems, tapping on it shows the dropdown for a moment, then goes to the link in the top element.

Confirmed broken on a Nexus 7 and iPad 3.

[azaozz]

Does the admin menu work properly on a Nexus 7? If yes, the front-end menu may need similar ​JS workaround.

[celloexpressions]

Also a problem for Windows (Phone/8) touch devices. And a problem that a majority of websites with dopdowns have. IE11 is going to make fixes for dropdown menus itself (hover effects more broadly), like iOS does. Android browsers will probably follow eventually.

[kraftner]

I can confirm this issue on Galaxy Tab 10.1 / Android 4.0.4 Stock Browser and Chrome 30.
Both in admin bar and site menu in Twenty Twelve.

[kraftner]

Technically seems to be the same as #20614 even if it is about admin menu.

[kraftner]

#23496 was marked as a duplicate.

[lancewillett]

@obenland Can you confirm this actually work on an iPad? See #26787.

[lancewillett]

#26787 was marked as a duplicate.

[lancewillett]

I tested this on an iPad 3 with Twenty Twelve and submenus -- a single click brings up the submenu but it only remains visible for a brief time, maybe half a second. You have to click really fast before it disappears. :)

[lancewillett]

Noting that Twenty Thirteen menus work as expected, so it *should* be fixable.

[tar.gz]

During the contributor day at WordCamp Switzerland, we noticed that Twenty Thirteen is also affected.

I worked on this (with Claudio Schwartz) and we found a working solution, with big help by Matías Ventura.

This patch has been tested on an iPhone/iOS7 device.

[tar.gz]

Patch for TwentyThirteen

[tar.gz]

Updated fix for TwentyThirteen

[tar.gz]

The 24767.2.diff patch has two improvements:

• We use the already existing .focus class, so we don't need additional CSS.
• We remove the class from sibling elements, otherwise adjascent submenus can overlap. Thanks to Piotr Soluch!

The patch has been successfully tested on iPad 3rd (7.0) via browserstack, and a Samsung Galaxy Note (Google Chrome browser, Android 4.2.2).

We found a minor issue on iPhone/iOS. The color highlighting of selected submenus is inconsistent – highlight color (:hover) gets attributed to the parent of the tapped element. Claudio is investigating.

[purzlbaum]

Fix for twentytwelve theme

[purzlbaum]

The my patch is for twentytwelve theme

I investigated about the problem as @tar.gz mentioned and found out, that the problem is only on iOS. It's the same problem we have on WP admin. Therefore I think it's a bug of webkit.

[helen]

Replying to purzlbaum:

I investigated about the problem as @tar.gz mentioned and found out, that the problem is only on iOS. It's the same problem we have on WP admin. Therefore I think it's a bug of webkit and I have no solution how to solve it.

#27514

[purzlbaum]

Replying to helen:

Replying to purzlbaum:

I investigated about the problem as @tar.gz mentioned and found out, that the problem is only on iOS. It's the same problem we have on WP admin. Therefore I think it's a bug of webkit and I have no solution how to solve it.

#27514

Hi Helen

whats going on with this ticket right now? Should we search for another approach?

[helen]

Replying to purzlbaum:

whats going on with this ticket right now? Should we search for another approach?

Not completely sure what you're asking, but there's no approach right now, just noting that that issue is covered in another ticket and is not specific to this ticket, which is about Twenty Twelve.

[tar.gz]

I assume the question by purzlbaum is regarding this present ticket.

We have two patches now, that solve the submenu usability problem for Twenty Twelve and Twenty Thirteen.

What's next? Shall we ship them? Or is further testing on other devices required?

[DavidTheMachine]

Patches .2 & .3 applied together fix the problem on the themebusters site. I can drill all the way down to the Level 3 item in the Parent Page menu on a Nexus 7.

[lancewillett]

In 28699:

Twenty Thirteen: make submenu links work correctly on tablets. Props tar.gz, purzlbaum, DavidTheMachine. See #24767.

[lancewillett]

In 28700:

Twenty Twelve: make submenu links work correctly on tablets. Props tar.gz, purzlbaum, DavidTheMachine. See #24767.

[lancewillett]

In 28702:

Twenty Twelve: bump JS version after r28700 change. See #24767.

[zoonini]

This issue seems to have reappeared - submenu items on dropdown menus can't be selected on iPad.

Can replicate on the demo: ​http://wp-themes.com/twentytwelve/

Tested in Safari / iPad mini retina / iOS 7.1.2.

Reported in: ​http://en.forums.wordpress.com/topic/not-able-see-drop-down-menus-from-pages-on-my-ipad

[zoonini]

Screencast: ​https://cloudup.com/c6Nnm2LCbwr

[purzlbaum]

Maybe we should recode the whole CSS/Javascript.

[babbardel]

The above case happens only there isn't a menu assigned to the "Primary Menu" location and there are Sub Pages for the default Pages already in the menu, which appears as submenus. Those submenus are not treated with the same CSS classes: ".menu-item-has-children" vs ".page_item_has_children".

I change it in navigation.js and now should work as intended (tested on iPad Air / iOS 8.1.1 too)

[babbardel]

Updated fix for TwentyTwelve

[azaozz]

In [30746]:

Twenty Twelve: menu on touch devices: fix jQuery selector for menu items with submenus. props babbardel, fixes #24767.

[trenzterra]

Hi there,

Is it possible to recode it such that it shows a dropdown instead? The modified code does not seem to work on Windows 8 tablets on Internet Explorer and Firefox (works though with Chrome). I tried removing the ontouchstart detection but it still does not work.

Any idea how I could make it work?

I'm using WP 4.0.1 on 2013 theme.

[lancewillett]

Hi trenzterra, please open a new ticket for Twenty Thirteen -- this one is for Twenty Twelve.

[trenzterra]

I apologise, but this issue affects the 2012 theme as well in addition to the 2013 theme (I have just tested it), so should this ticket still be used?