Draggable panels interfere with touch scrolling on IE 10/11

[iammattthomas]

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.

[samuelsidler]

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.

[celloexpressions]

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.

[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.

[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.

[nacin]

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.

[nacin]

Needs manpower. Help!

[georgestephanis]

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.

[georgestephanis]

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;
}

[georgestephanis]

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

[iammattthomas]

In 26715:

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