Opened 10 years ago
Closed 7 years 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)
Change History (48)
This ticket was mentioned in Slack in #core-customize by celloexpressions. View the logs.
10 years ago
#3
in reply to:
↑ 2
@
10 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:
↓ 5
@
10 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
@
10 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:
↓ 7
@
10 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
@
10 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
@
9 years 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.
8 years ago
#12
@
8 years 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
@
8 years 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
@
8 years 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.
8 years ago
#16
@
8 years ago
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.
#17
@
8 years 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
@
8 years 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.
8 years ago
This ticket was mentioned in Slack in #core by swissspidy. View the logs.
8 years ago
#21
@
8 years 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
@
8 years 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.
This ticket was mentioned in Slack in #core-media by joemcgill. View the logs.
8 years ago
This ticket was mentioned in Slack in #core-media by joemcgill. View the logs.
8 years ago
This ticket was mentioned in Slack in #core-media by joemcgill. View the logs.
8 years ago
This ticket was mentioned in Slack in #core-media by joemcgill. View the logs.
8 years ago
#29
@
8 years 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.
8 years ago
#31
@
8 years 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.
#33
@
8 years 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.
This ticket was mentioned in Slack in #core by bor0. View the logs.
8 years ago
#35
@
8 years 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.
8 years ago
#37
@
8 years 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.
This ticket was mentioned in Slack in #core-media by joemcgill. View the logs.
7 years ago
This ticket was mentioned in Slack in #core by jeffpaul. View the logs.
7 years ago
#41
@
7 years 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.
7 years ago
#43
@
7 years 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.
Is this still an issue for you, and are you testing without any plugins activated and a default theme?