Make WordPress Core

Opened 10 years ago

Closed 10 years ago

#26297 closed defect (bug) (fixed)

Draggable panels interfere with touch scrolling on IE 10/11

Reported by: iammattthomas's profile iammattthomas Owned by: iammattthomas's profile iammattthomas
Milestone: 3.8 Priority: high
Severity: critical Version: 3.8
Component: Administration Keywords: has-patch
Focuses: ui Cc:

Description

On pages like the Dashboard and the Post Editor, where we have panels that can be dragged and dropped to re-arrange the interface, those panels make it difficult or sometimes impossible to scroll the page on a mobile device using IE 10 and 11. An incidental touch on one of these panels, even if it happens in a swipe gesture to scroll the page, activates the drag-and-drop functionality, and the swipe/scroll is not recognized.

I've tested and reproduced this behavior on a Surface running Windows 8.1/IE 11 and a Nokia 820 on Windows Phone 8 / IE mobile 10.

Attachments (3)

26297.diff (1.3 KB) - added by georgestephanis 10 years ago.
26297.2.diff (1.0 KB) - added by georgestephanis 10 years ago.
26297.3.diff.txt (1.1 KB) - added by georgestephanis 10 years ago.

Download all attachments as: .zip

Change History (14)

#1 @samuelsidler
10 years ago

Has this always been the case? Or is it a recent regression from the new admin interface (and/or other changes)? If it's not a regression, I say we punt it.

#2 @celloexpressions
10 years ago

  • Severity changed from normal to major

While I believe this has been around for a while, the newly responsive admin design significantly changes the implications. Before, zooming in and out worked around the issue, since the admin menu and header regions could be scrolled.

Now, the draggable regions take up almost the entire width of the screen, and can very easily take up the entire screen before losing scrollability due to kinetic scrolling. At that point, WordPress becomes completely unusable. When the toolbar was fixed in even the smallest viewports in earlier versions of MP6, it was the one thing that could get a user out of the frozen scrolling, with the scroll-to-top functionality and the admin menu access. But the toolbar is no longer fixed at narrow viewports, so nothing short of refreshing the page and preventing it from auto-scrolling back to the same spot frees the user.

In the case of the dashboard, this doesn't cause too many tangible issues. But on the new/edit post screen, going past the post editor and into the sortable metaboxes, where scrolling immediately becomes locked, blocks critical functionality. Depending on the exact metaboxes configuration, any of the metaboxes can become inaccessible, and it also becomes impossible to return to the post editor. The worst, and very frequent scenario occurs when the publish metabox is out of view and scrolling is locked. There is nothing to be done but hope that WordPress correctly auto-saves the content and refresh the browser. It is impossible to save or publish the post.

Basically, we're talking about no longer being able to reliably post with IE10/11 in narrow viewports (most critically on Windows Phone 7 & 8, where IE is the only allowed browser; IE on Windows 8 is also affected, but only critically in the "snapped" orientation, as scrollable regions are accessible otherwise). That's a pretty critical regression.

#3 follow-up: @iammattthomas
10 years ago

It's correct that this is not a regression, but the new responsive layout does make it a more significant problem than it was before.

#4 follow-up: @celloexpressions
10 years ago

Noting that the issue doesn't appear to occur with IE9 Mobile (Windows Phone 7.5/7.8); seems isolated to IE10 & 11.

To clarify, in terms of usability there is a significant regression, but it is caused by the MP6 merge, not this bug directly.

#5 @matt
10 years ago

  • Priority changed from normal to high

#6 in reply to: ↑ 3 @nacin
10 years ago

  • Severity changed from major to critical

Replying to iammattthomas:

It's correct that this is not a regression, but the new responsive layout does make it a more significant problem than it was before.

#7 @nacin
10 years ago

  • Keywords dev-feedback added

Needs manpower. Help!

#8 in reply to: ↑ 4 @georgestephanis
10 years ago

Replying to celloexpressions:

Noting that the issue doesn't appear to occur with IE9 Mobile (Windows Phone 7.5/7.8); seems isolated to IE10 & 11.

To clarify, in terms of usability there is a significant regression, but it is caused by the MP6 merge, not this bug directly.

IE9 Mobile didn't have touch support -- it just parsed everything as a click, that was overhauled in IE10 Mobile.

#9 @georgestephanis
10 years ago

This is being intentionally nerfed by our css:

http://core.trac.wordpress.org/browser/trunk/src/wp-admin/css/wp-admin.css#L11180

/* Enable draggable on IE10 touch events until it's rolled into jQuery UI core */
.ui-sortable,
.ui-draggable {
        -ms-touch-action: none;
}

#10 @georgestephanis
10 years ago

  • Keywords has-patch added; needs-patch dev-feedback removed

.2.diff worked well, but didn't account for the menus page -- which is handled in .3.diff

If there's any other sections that still are in need of love, it's pretty easy to extend -- it's merely CSS turning stuff on and off.

#11 @iammattthomas
10 years ago

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

In 26715:

Keep draggable panels from interfering with swipe scrolling on touch devices running Internet Explorer 10/11. Fixes #26297, props georgestephanis.

Note: See TracTickets for help on using tickets.