Media: Image cropping on mobile devices does not work

[rachelsquirrel]

It’s not possible to move the selection when cropping an image to select a different part of the image. The dotted box appears around the selected area but it doesn’t respond to gestures.

See attached screenshot.

Steps to reproduce.
1) Open a web browser on an Android device and log into a WordPress site.
2) Go to Appearance > Customize > Header.
3) Select an image from the Media Library (or upload one) then tap "Select and Crop".
4) Try to move the selection in the next screen. It doesn't move.

[valendesigns]

Is this still an issue for you, and are you testing without any plugins activated and a default theme?

[rachelsquirrel]

Replying to valendesigns:

Is this still an issue for you, and are you testing without any plugins activated and a default theme?

It's still an issue. I tested it on a WordPress.com site with TwentyFifteen using Chrome and the default web browser on Android devices.

[valendesigns]

Not sure if .com is the same as .org for this particular bit of code. I don't have an Android device to verify.

[rachelsquirrel]

Replying to valendesigns:

Not sure if .com is the same as .org for this particular bit of code. I don't have an Android device to verify.

I have confirmed it also happens on a .org site with all plugins disabled and a default theme. The cropped image is not responding to gestures. I can also reproduce this on iOS devices.

[valendesigns]

Thank you for looking into this a bit more, your testing rules out an Android only issue. Which will make fixing it less of a nightmare. Well, in theory. Cheers!

[rachelsquirrel]

Replying to valendesigns:

Thank you for looking into this a bit more, your testing rules out an Android only issue. Which will make fixing it less of a nightmare. Well, in theory. Cheers!

Yes, sorry, it doesn't look like this is specific to Android. I should have tested with iOS to begin with. The cropped selection doesn't respond to gestures on mobile devices.

[celloexpressions]

Testing with a touch screen laptop, cropping works with touch now in Chrome, but not Edge. It's likely dependent on functionality that browsers need to implement, but there may be a way to make it work on other browsers as well.

[melchoyce]

#40132 was marked as a duplicate.

[melchoyce]

Able to replicate as well. We've had multiple reports of this on WordPress.com. Let's try to fix and get this in for 4.7.4.

[swissspidy]

The sooner we can get a patch for testing, the better.

@melchoyce Do you already have a fix on WordPress.com by chance?

[westonruter]

I get mixed results when I test this issue on 4.7.3 in Chrome running in Android 7.1.1 on a Nexus 6P. I can always resize the crop vertically and change the placement of the crop box vertically. What I'm not able to do is consistently resize horizontally. It seems like there may be a bug in the imgAreaSelect jQuery plugin core is using. From a quick look at the source, it seems that maybe the doResize() function isn't working as expected on mobile.

I'm changing this to the Media component because the cropper code is part of that component. The customizer is just re-using the underlying Media code.

[bor0]

I saw there was a similar issue reported here ​http://stackoverflow.com/questions/35270073/jquery-imgareaselect-not-working-on-mobile-devices. After using the dev branch ​https://github.com/odyniec/imgareaselect/blob/0ecc52a53ca6a37ed83a09f9f684a805abd0b3ba/jquery.imgareaselect.js the issue was resolved as far as I tested.

[bor0]

The patch that I'm proposing uses https://github.com/odyniec/imgareaselect/tree/new instead of https://github.com/odyniec/imgareaselect/tree/master, where the issue is fixed. It must be noted that this library was last updated 4 years ago.

[bor0]

Note that the proposed patch overwrites a previous monkey patch which supposedly added mobile support.

[swissspidy]

The monkey patch was added in [33329] as part of #16434.

It seems like lots of the improvements made there in terms of touch device support were integrated into the version from https://github.com/odyniec/imgareaselect/tree/new

@obenland Since you were leading the site icon project, maybe you're able to chime in here?

[obenland]

It seems like lots of the improvements made there in terms of touch device support were integrated into the version from ​https://github.com/odyniec/imgareaselect/tree/new

I think it was more the other way around :)

Sure, if their RC1 fixes the bugs mentioned here and don't break existing touch behavior in Site Icon, go for it.

[kirasong]

I'm not able to reproduce this bug on trunk and an iPhone 7 with iOS 10.3.1 and Safari.

[karmatosed]

I tested this also ant I am unable to replicate this. I was using an iPhone 7 Plus. For now, I think we can safely close this, however if someone can replicate, we may need to investigate what devices are still having issues with this.

[bor0]

I reproduced this on latest trunk, using Samsung Galaxy A3 Android v6.0.1.

[bor0]

Also reproduced on Chrome for Android (besides Android's built-in browser). Reopening.

[jbpaul17]

With details noting the Android specifics and this getting reopened, I'm effectively punting from 4.8 to 4.8.1 as 4.8 RC1 is tomorrow and this defect is unlikely to be resolved in time for that.

[karmatosed]

I don't have any other Android device apart from a Nexus 6P, however I also used Browserstack and was unable to replicate this. Here are the devices I tried:

• Samsung Galaxy S3
• Nexus 6P

Now, it could be its a specific type. I did not have access to all.

Can we maybe get a video of this to see if someone can recreate?

[melchoyce]

#41242 was marked as a duplicate.

[jbpaul17]

@rachelsquirrel would you please re-test this on an Android device utilizing WordPress version 4.8 and confirm if the issue is still occurring or if it's been resolved?

[rachelsquirrel]

This works on iOS now and the Chrome browser on my Android device however it doesn't work with the default browser on Android. I tested with a Samsung SM-T330 running Android 4.4.2. This is an old version of Android so it's possible it's working with the default browser running a more up-to-date version of Android. I'm happy for this issue to be closed now given it works with Chrome on Android.

[Clorith]

The latest versions of Android also behave properly here with the default browsers as well, closing off as worksforme since it is mentioned taht iOS also works.