WordPress.org

Make WordPress Core

Opened 22 months ago

Closed 5 months ago

Last modified 5 months ago

#24767 closed defect (bug) (fixed)

Twenty Twelve: submenu links broken on tablets

Reported by: 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 12 months ago.
Patch for TwentyThirteen
24767.2.diff (907 bytes) - added by tar.gz 12 months ago.
Updated fix for TwentyThirteen
24767.3.diff (1.3 KB) - added by purzlbaum 12 months ago.
Fix for twentytwelve theme
24767.4.diff (630 bytes) - added by babbardel 5 months ago.
Updated fix for TwentyTwelve

Download all attachments as: .zip

Change History (39)

comment:1 @azaozz22 months ago

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

Last edited 22 months ago by azaozz (previous) (diff)

comment:2 @lancewillett19 months ago

  • Priority changed from normal to low

comment:3 @celloexpressions19 months 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.

comment:4 @kraftner19 months 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.

comment:5 @kraftner19 months ago

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

comment:6 @kraftner19 months ago

#23496 was marked as a duplicate.

comment:7 @lancewillett14 months ago

  • Milestone changed from Awaiting Review to Future Release

comment:8 @lancewillett13 months 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.

comment:9 @lancewillett13 months ago

#26787 was marked as a duplicate.

comment:10 @ircbot13 months ago

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

comment:11 @lancewillett13 months 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. :)

comment:12 @lancewillett13 months ago

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

comment:13 @tar.gz12 months 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.gz12 months ago

Patch for TwentyThirteen

@tar.gz12 months ago

Updated fix for TwentyThirteen

comment:14 @tar.gz12 months 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.

@purzlbaum12 months ago

Fix for twentytwelve theme

comment:15 follow-up: @purzlbaum12 months 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 12 months ago by purzlbaum (previous) (diff)

comment:16 in reply to: ↑ 15 ; follow-up: @helen12 months 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

comment:17 in reply to: ↑ 16 ; follow-up: @purzlbaum12 months 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?

comment:18 in reply to: ↑ 17 @helen12 months 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.

comment:19 @tar.gz12 months 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?

comment:20 @DavidTheMachine11 months 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.

comment:21 @ircbot11 months ago

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

comment:22 @lancewillett11 months ago

In 28699:

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

comment:23 @lancewillett11 months ago

In 28700:

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

comment:24 @lancewillett11 months ago

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

comment:25 @lancewillett11 months ago

In 28702:

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

comment:26 @zoonini5 months 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

comment:28 @lancewillett5 months ago

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

comment:29 @lancewillett5 months ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

comment:30 @purzlbaum5 months ago

Maybe we should recode the whole CSS/Javascript.

comment:31 @babbardel5 months 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)

@babbardel5 months ago

Updated fix for TwentyTwelve

comment:32 @azaozz5 months 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.

comment:33 @trenzterra5 months 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.

comment:34 @lancewillett5 months 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.

comment:35 @trenzterra5 months 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.