Can't edit images in admin on Android

[Jozsef]

My client reported this issue because he wants to edit his site on his Android phone, especially uploading photos from there to the site.

After uploading an image to an image field it is not possible to edit / add description when it is displayed as a square or proportional thumbnail. Since the "Edit" overlay is not displayed on tap, deleting the image is also not possible. Tapping or double tapping the image has absolutely no effect.

Editing images is only possible if I change the image field to list view but buttons and the description field still need double tap to work that is anything but expected or intuitive. Single tap only changes their hover state.

This has been always working as expected on iOS: single tap expands the thumbnail to editing view where the crop/focus/variations buttons and description field only require a single tap to engage. This has been tested on ProcessWire version: 3.0.171 and Android 9.0 / Chrome 89. Previous Android versions and Chrome versions had the same issue. Changing the admin theme also had no affect.

Any idea how can I even start solving this issue? It looks like a core problem. since the GitHub issue had no reply I was hoping to pick the collective brain.
I can't launch the site until this is sorted and the client is unlikely to switch to iPhone any time soon. ?

[Robin S]

16 hours ago, Jozsef said:

Any idea how can I even start solving this issue?

The symptoms indicate that the click event that is supposed to show the edit pane isn't being triggered as expected. To debug you can use some custom JS to find out what the target is when you click on the thumbnail:

$(document).on('click', function(event) {
	var $target = $(event.target);
	alert($target.attr('class'));
});

On most browsers and devices you'll see: "gridImage__edit", which is what is expected in InputfieldImage.js

But when I tested on Android I got: "gridImage_inner" and there is no event handler bound to that element. Why doesn't Android trigger the click event for .gridImage__edit? Perhaps because .gridImage__edit is display:none until the outer .gridImage element is hovered. And it seems that Android is quirky when it comes to triggering events on elements that are not visible, because even if you force display:block on .gridImage__edit and add visibility:hidden or opacity:0 it still won't trigger the click event.

What worked for me was forcing display:block on .gridImage__edit and then using display:none on the child span so that the "Edit" label only appears on hover as intended (on devices that support hover or at least emulate it better than Android seems to be able to). So in some custom admin CSS try:

.gridImage__edit { display:block !important; }
.gridImage__edit span { display:none; }
.gridImage__edit:hover span { display:inline; }

 

16 hours ago, Jozsef said:

buttons and the description field still need double tap to work that is anything but expected or intuitive. Single tap only changes their hover state.

I couldn't reproduce that on my Android tablet - a single touch worked for me.

[Jozsef]

Wow, @Robin S you are very good at debugging. I'll try that and see what happens. I'm not sure what the double tap issue comes from, I run near stock Android on a OnePlus phone with the latest Chrome. This has been an issue going back to years now.