WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 2 months ago

#30634 closed defect (bug) (worksforme)

Media: Image cropping on mobile devices does not work

Reported by: rachelsquirrel Owned by:
Milestone: Priority: normal
Severity: normal Version: 4.0.1
Component: Media Keywords: has-patch
Focuses: Cc:

Description

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.

Attachments (2)

cropping.png (650.2 KB) - added by rachelsquirrel 3 years ago.
30634.diff (55.3 KB) - added by bor0 6 months ago.

Download all attachments as: .zip

Change History (48)

This ticket was mentioned in Slack in #core-customize by celloexpressions. View the logs.


2 years ago

#2 follow-up: @valendesigns
2 years ago

  • Keywords reporter-feedback added

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

#3 in reply to: ↑ 2 @rachelsquirrel
2 years ago

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.

#4 follow-up: @valendesigns
2 years ago

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

#5 in reply to: ↑ 4 @rachelsquirrel
2 years ago

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.

#6 follow-up: @valendesigns
2 years ago

  • Keywords needs-patch added; reporter-feedback removed
  • Summary changed from Image cropping with the customizer on Android devices to Customizer: Image cropping on mobile devices does not work

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!

#7 in reply to: ↑ 6 @rachelsquirrel
2 years ago

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.

#8 @celloexpressions
17 months ago

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.

This ticket was mentioned in Slack in #core-customize by melchoyce. View the logs.


6 months ago

#10 @melchoyce
6 months ago

#40132 was marked as a duplicate.

#11 @westonruter
6 months ago

  • Milestone changed from Awaiting Review to 4.7.4

#12 @melchoyce
6 months ago

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.

#13 @swissspidy
6 months ago

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

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

#14 @westonruter
6 months ago

  • Component changed from Customize to Media
  • Summary changed from Customizer: Image cropping on mobile devices does not work to Media: Image cropping on mobile devices does not work

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.

This ticket was mentioned in Slack in #core by swissspidy. View the logs.


6 months ago

@bor0
6 months ago

#17 @bor0
6 months ago

  • Keywords has-patch added; needs-patch removed

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.

#18 @bor0
6 months ago

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

This ticket was mentioned in Slack in #core-media by joemcgill. View the logs.


6 months ago

This ticket was mentioned in Slack in #core by swissspidy. View the logs.


6 months ago

#21 @swissspidy
6 months ago

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?

#22 @obenland
6 months ago

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.

#23 @swissspidy
5 months ago

  • Milestone changed from 4.7.4 to 4.7.5

This ticket was mentioned in Slack in #core-media by joemcgill. View the logs.


5 months ago

This ticket was mentioned in Slack in #core-media by joemcgill. View the logs.


5 months ago

This ticket was mentioned in Slack in #core-media by joemcgill. View the logs.


5 months ago

#27 @mikeschroder
5 months ago

  • Milestone changed from 4.7.5 to 4.8

This ticket was mentioned in Slack in #core-media by joemcgill. View the logs.


4 months ago

#29 @mikeschroder
4 months ago

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

This ticket was mentioned in Slack in #core-media by joemcgill. View the logs.


4 months ago

#31 @karmatosed
4 months ago

  • Milestone 4.8 deleted
  • Resolution set to worksforme
  • Status changed from new to closed

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.

#32 @bor0
4 months ago

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

#33 @bor0
4 months ago

  • Resolution worksforme deleted
  • Status changed from closed to reopened

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

Can someone set the milestone back to 4.8?

cc @mikeschroder

Thanks.

Last edited 4 months ago by bor0 (previous) (diff)

This ticket was mentioned in Slack in #core by bor0. View the logs.


4 months ago

#35 @jbpaul17
4 months ago

  • Milestone set to 4.8.1

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.

This ticket was mentioned in Slack in #core-media by joemcgill. View the logs.


4 months ago

#37 @karmatosed
4 months ago

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?

Last edited 4 months ago by karmatosed (previous) (diff)

This ticket was mentioned in Slack in #core-media by joemcgill. View the logs.


3 months ago

#39 @melchoyce
2 months ago

#41242 was marked as a duplicate.

This ticket was mentioned in Slack in #core by jeffpaul. View the logs.


2 months ago

#41 @jbpaul17
2 months ago

@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?

This ticket was mentioned in Slack in #core-media by joemcgill. View the logs.


2 months ago

#43 @rachelsquirrel
2 months ago

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.

#44 @karmatosed
2 months ago

  • Keywords close added

This ticket was mentioned in Slack in #core by jeffpaul. View the logs.


2 months ago

#46 @Clorith
2 months ago

  • Keywords close removed
  • Milestone 4.8.1 deleted
  • Resolution set to worksforme
  • Status changed from reopened to closed

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.

Note: See TracTickets for help on using tickets.