Make WordPress Core

Opened 11 years ago

Closed 10 years ago

Last modified 10 years ago

#24767 closed defect (bug) (fixed)

Twenty Twelve: submenu links broken on tablets

Reported by: obenland's profile obenland Owned by:
Milestone: 4.1 Priority: normal
Severity: normal Version: 3.5
Component: Bundled Theme Keywords: has-patch
Focuses: Cc:

Description (last modified by lancewillett)

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.

Attachments (4)

24767.diff (1.3 KB) - added by tar.gz 11 years ago.
Patch for TwentyThirteen
24767.2.diff (907 bytes) - added by tar.gz 11 years ago.
Updated fix for TwentyThirteen
24767.3.diff (1.3 KB) - added by purzlbaum 11 years ago.
Fix for twentytwelve theme
24767.4.diff (630 bytes) - added by babbardel 10 years ago.
Updated fix for TwentyTwelve

Download all attachments as: .zip

Change History (39)

#1 @azaozz
11 years ago

Does the admin menu work properly? If yes, the front-end menu may need the same JS workaround.

Version 0, edited 11 years ago by azaozz (next)

#2 @lancewillett
11 years ago

  • Priority changed from normal to low

#3 @celloexpressions
11 years ago

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.

#4 @kraftner
11 years ago

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.

#5 @kraftner
11 years ago

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

#6 @kraftner
11 years ago

#23496 was marked as a duplicate.

#7 @lancewillett
11 years ago

  • Milestone changed from Awaiting Review to Future Release

#8 @lancewillett
11 years ago

  • Description modified (diff)
  • Priority changed from low to normal
  • Summary changed from Twenty Twelve: Dropdown menu broken on Android to Twenty Twelve: submenu links broken on tablets

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

#9 @lancewillett
11 years ago

#26787 was marked as a duplicate.

This ticket was mentioned in IRC in #wordpress-themes by lancewillett. View the logs.


11 years ago

#11 @lancewillett
11 years ago

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. :)

#12 @lancewillett
11 years ago

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

#13 @tar.gz
11 years ago

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
11 years ago

Patch for TwentyThirteen

@tar.gz
11 years ago

Updated fix for TwentyThirteen

#14 @tar.gz
11 years ago

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
11 years ago

Fix for twentytwelve theme

#15 follow-up: @purzlbaum
11 years ago

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 and I have no solution how to solve it.

Last edited 11 years ago by purzlbaum (previous) (diff)

#16 in reply to: ↑ 15 ; follow-up: @helen
11 years ago

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

#17 in reply to: ↑ 16 ; follow-up: @purzlbaum
11 years ago

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?

#18 in reply to: ↑ 17 @helen
11 years ago

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.

#19 @tar.gz
11 years ago

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?

#20 @DavidTheMachine
11 years ago

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.

This ticket was mentioned in IRC in #wordpress-themes by Guest2809. View the logs.


11 years ago

#22 @lancewillett
11 years ago

In 28699:

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

#23 @lancewillett
11 years ago

In 28700:

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

#24 @lancewillett
11 years ago

  • Keywords dev-feedback removed
  • Milestone changed from Future Release to 4.0
  • Resolution set to fixed
  • Status changed from new to closed

#25 @lancewillett
11 years ago

In 28702:

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

#26 @zoonini
10 years ago

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

#28 @lancewillett
10 years ago

  • Keywords needs-refresh added
  • Milestone changed from 4.0 to 4.1

#29 @lancewillett
10 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

#30 @purzlbaum
10 years ago

Maybe we should recode the whole CSS/Javascript.

#31 @babbardel
10 years ago

  • Keywords has-patch added; needs-patch removed

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
10 years ago

Updated fix for TwentyTwelve

#32 @azaozz
10 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In [30746]:

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

#33 @trenzterra
10 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

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.

#34 @lancewillett
10 years ago

  • Keywords needs-refresh removed
  • Resolution set to fixed
  • Status changed from reopened to closed

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

#35 @trenzterra
10 years ago

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?

Note: See TracTickets for help on using tickets.