Page MenuHomePhabricator

Can't focus block image in mobile visual editor
Closed, ResolvedPublic

Description

Steps to reproduce:

  1. Go to a Wikipedia page with a block image
  2. Tap on an image

Expected:

  • The image focuses (see highlight and toolbar)

Actual:

  • The image doesn't focus; instead the cursor moves to the nearest position in the text

Event Timeline

It looks a CSS * rule added for iOS, which results in changing the stacking order, and puts the adjacent paragraph on top of the image.

It was introduced 4 years ago in https://gerrit.wikimedia.org/r/#/c/mediawiki/extensions/MobileFrontend/+/148888/4/less/common/Overlay.less

It looks like disabling this rule doesn't have an adverse effect, so either it wasn't necessary, or only affects old versions of iOS.

CC'ing @Volker_E @Jdlrobson if they have any opinions on these hardware scrolling CSS hacks?

Change 455822 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/skins/MinervaNeue@master] Remove webkit-transform hack to fix stacking

https://gerrit.wikimedia.org/r/455822

I'd hope that hack is no longer needed and is badly documented. This change will only impact VisualEditor, you it might be useful organising some QA with real (and old iOS) devices to get a sense of the impact on scrolling and if it still is a problem.

Change 455822 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Remove webkit-transform hack to fix stacking

https://gerrit.wikimedia.org/r/455822

Note: This needs to be verified in production as well (which is still a week away!). Keeping this in QA column for now.