WordPress.org

Make WordPress Core

Opened 12 months ago

Closed 5 weeks ago

Last modified 5 weeks ago

#24767 closed defect (bug) (fixed)

Twenty Twelve: submenu links broken on tablets

Reported by: obenland Owned by:
Milestone: 4.0 Priority: normal
Severity: normal Version: 3.5
Component: Bundled Theme Keywords: needs-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 (3)

24767.diff (1.3 KB) - added by tar.gz 2 months ago.
Patch for TwentyThirteen
24767.2.diff (907 bytes) - added by tar.gz 2 months ago.
Updated fix for TwentyThirteen
24767.3.diff (1.3 KB) - added by purzlbaum 2 months ago.
Fix for twentytwelve theme

Download all attachments as: .zip

Change History (28)

comment:1 azaozz12 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 12 months ago by azaozz (previous) (diff)

comment:2 lancewillett10 months ago

  • Priority changed from normal to low

comment:3 celloexpressions10 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 kraftner9 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 kraftner9 months ago

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

comment:6 kraftner9 months ago

#23496 was marked as a duplicate.

comment:7 lancewillett4 months ago

  • Milestone changed from Awaiting Review to Future Release

comment:8 lancewillett4 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 lancewillett4 months ago

#26787 was marked as a duplicate.

comment:10 ircbot4 months ago

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

comment:11 lancewillett4 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 lancewillett4 months ago

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

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

Patch for TwentyThirteen

tar.gz2 months ago

Updated fix for TwentyThirteen

comment:14 tar.gz2 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.

purzlbaum2 months ago

Fix for twentytwelve theme

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

comment:16 in reply to: ↑ 15 ; follow-up: helen2 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: purzlbaum2 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 helen2 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.gz2 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 DavidTheMachine5 weeks 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 ircbot5 weeks ago

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

comment:22 lancewillett5 weeks ago

In 28699:

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

comment:23 lancewillett5 weeks ago

In 28700:

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

comment:24 lancewillett5 weeks 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 lancewillett5 weeks ago

In 28702:

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

Note: See TracTickets for help on using tickets.