Make WordPress Core

Opened 11 years ago

Closed 10 years ago

Last modified 10 years ago

#25972 closed defect (bug) (fixed)

MP6: Network admin menu not functional

Reported by: johnbillion's profile johnbillion Owned by: iammattthomas's profile iammattthomas
Milestone: 3.8 Priority: high
Severity: normal Version: 3.8
Component: Administration Keywords: needs-patch dev-feedback
Focuses: ui Cc:


In the <782px media query, the Network Admin submenu of the My Sites menu is not accessible, and the Network Admin link itself does not trigger when touched. This means there is no way to access the Network Admin screen on a device such as a smartphone which triggers this media query.

Tested on Android Chrome on a Nexus 4. On desktop browsers resized down to trigger the <782px media query, the menu does actually work.

Attachments (5)

25972.diff (484 bytes) - added by ryelle 11 years ago.
25972.2.diff (497 bytes) - added by ninnypants 10 years ago.
25972.3.diff (709 bytes) - added by ninnypants 10 years ago.
Instead of trying to remove the prevent default just stop propagation on any items that aren't in the root of the menu.
25972.4.diff (1.0 KB) - added by ninnypants 10 years ago.
Fix double tap on links
25972.5.diff (1.2 KB) - added by azaozz 10 years ago.

Download all attachments as: .zip

Change History (27)

#1 @SergeyBiryukov
11 years ago

  • Component changed from Graphic Design to Administration
  • Keywords ui-focus added
  • Milestone changed from Awaiting Review to 3.8

11 years ago

#2 @ryelle
11 years ago

The touchOpen function in admin-bar.js was closing the network admin dropdown (removing the hover class) as soon as any item was clicked. 25972.diff won't remove the hover class on any parents of the clicked element.

#3 @melchoyce
11 years ago

  • Keywords has-patch added

#4 @johnbillion
11 years ago

#23496 was marked as a duplicate.

#5 @matt
11 years ago

  • Priority changed from normal to high

#6 @iammattthomas
11 years ago

I believe the problem described in the ticket isn't actually related to touchOpen, as I'm still seeing the described behavior after applying ryelle's patch. iOS, Windows Phone, and Firefox on Android all open dropdowns on the first tap, and activate the link if you tap a second time. On Chrome/Android, the top-level link activates immediately, at the same time the dropdown menu appears. I've searched on this topic a bit but haven't yet found any obvious solutions.

#7 @iammattthomas
10 years ago

  • Keywords needs-patch added; has-patch removed

10 years ago

#8 @ninnypants
10 years ago

  • Cc tyrel@… added

The issue seems to still be in touchOpen. When an a that is the child of an li.menupop is clicked it doesn't have a hover class so default is prevented. My patch makes it so that only e.preventDefault() is only called when the event is triggered by a direct descendent of the root quick links menu.

#9 @iammattthomas
10 years ago

After applying 25972.2.diff​ I am still seeing the described error in Chrome on Android, and it actually causes a regression in Safari on iOS where the dropdown menus currently work fine in trunk.

#10 @iammattthomas
10 years ago

Beyond the issue with Chrome activating links on first tap, making the dropdowns inaccessible, there's one separate issue that's also related to the bug described in this ticket: submenus within dropdowns aren't shown at all at responsive sizes. I'm working on a fix that makes submenus permanently visible inside dropdowns at screens below 600px, and makes them appear as normal submenus at screen sizes between 782px–600px.

#11 @iammattthomas
10 years ago

In 26687:

Un-hide dropdown submenus at responsive sizes, make submenus within dropdowns appear as inline lists at mobile device sizes. See #25972.

#12 @iammattthomas
10 years ago

Ok, dropdown submenus are at least visible now after r26687 and appear to be fully functional in desktop browsers. Unfortunately the submenu links aren't activating on any touch devices I've used, including Safari/iOS, Chrome/Android, and Firefox/Android. I'm not sure why this is, but will keep digging around.

#13 @iammattthomas
10 years ago

One more data point: submenu links appear to activate fine when I'm on the front end of my site, but don't do anything when in the backend. So for example, on a mobile device and a multisite installation:

On the front-end:

  • Tap the network (key) menu
  • Tap a sub-menu link under Network Admin: Dashboard, Sites, Users, etc.
  • The link will direct you to the selected page as expected.

On the back-end:

  • Tap the network menu
  • Tap a sub-menu link
  • The dropdown menu will disappear, but the link isn't activated and the new page isn't loaded.

#14 @ninnypants
10 years ago

It seems to be confined to the the My Sites tab from my testing IOS7/Safari/chrome

My Sites(key):

  • Tap network menu
  • Tap Submenu item
  • Dropdown disappears link isn't activated and new page doesn't load

Site Name Menu(world):

  • Tap World menu
  • Tap submenu item
  • Loads selected page

This is on a fresh Multisite install that includes the changes in r26687. If I apply my patch(25972.2.diff) it works correctly for both menus.

Last edited 10 years ago by ninnypants (previous) (diff)

#15 @nacin
10 years ago

  • Keywords dev-feedback added

Looks like we need more manpower here.

10 years ago

Instead of trying to remove the prevent default just stop propagation on any items that aren't in the root of the menu.

10 years ago

Fix double tap on links

#16 @ninnypants
10 years ago

Trying to disable blocking sublink taps with js was trickier because the event target wasn't always the first child of the current event target, so I switched menus back to being dropdowns and everything seems to be working correctly.

#17 @iammattthomas
10 years ago

In 26716:

Make toolbar dropdown submenu links tappable. See #25972, props ninnypants.

#18 @iammattthomas
10 years ago

r26716 gets dropdown submenu links working correctly on touch devices. Only outstanding issue now is that Chrome on Android is still activating top-level links on first touch, making dropdowns inaccessible.

#19 @iammattthomas
10 years ago

This CSS is causing this behavior:

html #wpadminbar {
	-webkit-transform: translate3d(0, 0, 0);
	-webkit-backface-visibility: hidden;
	-webkit-transition: 0;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	transition: 0;

I've tested commenting this out and it appears to have no ill effects on any other touch devices. I'll leave it commented out for now, but can delete later after inquiring with the MP6 team about what it was intended to do in the first place. Since I can find no regression caused by its removal I think it's worth solving this major bug in a major browser with this change.

#20 @iammattthomas
10 years ago

  • Owner set to iammattthomas
  • Resolution set to fixed
  • Status changed from new to closed

In 26770:

Comment out these touch-related styles as they break toolbar dropdowns in Chrome for Android. Fixes #25972.

10 years ago

#21 @azaozz
10 years ago

25972.5.diff fixes this here (without changing the css) on Android 4.3. The problem I've seen is that for some reason jQuery in Android/Chrome wouldn't fire adminbar.on('touchstart'..., but fires $(document).on( 'touchstart.wp-mobile-hover', '#wpadminbar',....

Tested on Android 4.3 (phone) and iOS 7 (iPad).

Last edited 10 years ago by azaozz (previous) (diff)

#22 @ninnypants
10 years ago

It works well for me on iPhone in both chrome and safari.

Note: See TracTickets for help on using tickets.