Page MenuHomePhabricator

[BUG] mobile-html: some pages are sized incorrectly on initial load
Closed, ResolvedPublicBug

Description

Steps to Reproduce

  1. Open https://en.wikipedia.org/api/rest_v1/page/mobile-html/Unicorn in mobile Safari
  2. Start scrolling

Expected Results

  • page fills ~100% of the browser's width

Actual Results

  • page fills ~50% of the browser's width, it resizes as I scroll, text ends up overlapping images

Environments Observed

  • Production

Additional notes

Event Timeline

Restricted Application changed the subtype of this task from "Task" to "Bug Report". · View Herald TranscriptJul 17 2019, 3:06 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
LGoto triaged this task as High priority.Jul 17 2019, 3:50 PM
LGoto moved this task from Needs triage to Upcoming on the Reading-Infrastructure-Team-Backlog board.

Change 525327 had a related patch set uploaded (by MSantos; owner: MSantos):
[mediawiki/services/mobileapps@master] Set shrink-to-fit in the viewport meta tag

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

MSantos claimed this task.Wed, Jul 24, 7:37 PM
MSantos moved this task from To Do to Doing on the Reading-Infrastructure-Team-Backlog (Kanban) board.

Change 525327 merged by jenkins-bot:
[mediawiki/services/mobileapps@master] Set shrink-to-fit in the viewport meta tag

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

@JoeWalsh could you please update/add the images with the shrink-to-fit=no fix?

Also, is the overflow still happening with all placeholder images or only with the gallery ones? (which by the way seems to be overlapping in any device)

@MSantos it's just the gallery and just the placeholders that are too wide. Once the gallery images load, the article no longer scrolls horizontally.

Gallery placeholders wider than the viewport:

scrolled to the right:

@MSantos it looks like commenting out

if (geometry.width) { placeholder.style.setProperty('width', `${geometry.width}`) }

in the page library LazyLoadTransform.ts fixes it - it's setting a 640px width, not sure where it's getting that 640px from yet, the width in the parsoid output is 96

MSantos added a comment.EditedWed, Jul 24, 10:16 PM

@MSantos it looks like commenting out

if (geometry.width) { placeholder.style.setProperty('width', `${geometry.width}`) }

in the page library LazyLoadTransform.ts fixes it - it's setting a 640px width, not sure where it's getting that 640px from yet, the width in the parsoid output is 96

@JoeWalsh it's getting the 640px from a data-width property [1]. Removing this line will affect all placeholders, not just the ones from gallery, not sure if that's a problem. I was preparing a CSS fix, like:

/* Prevent image placeholder to be wider than the viewport */
.gallerybox .pagelib_lazy_load_placeholder {
  width: 100%!important;
}

[1] https://github.com/wikimedia/wikimedia-page-library/blob/master/src/transform/ElementGeometry.js#L13

@MSantos

it's getting the 640px from a data-width property [1].

I should have clarified - I saw where it was reading the width, but I was not sure how it got 640px given this is the original tag from the parsoid ouptut:

<img resource="./File:Zapolyia_siedmiogrodzki2.png" src="//upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Zapolyia_siedmiogrodzki2.png/96px-Zapolyia_siedmiogrodzki2.png" data-file-width="783" data-file-height="981" data-file-type="bitmap" height="120" width="96" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Zapolyia_siedmiogrodzki2.png/191px-Zapolyia_siedmiogrodzki2.png 2x, //upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Zapolyia_siedmiogrodzki2.png/144px-Zapolyia_siedmiogrodzki2.png 1.5x" id="mwAVg">

Removing this line will affect all placeholders, not just the ones from gallery, not sure if that's a problem.

My thought at the time was that the fix would be to update that to get the correct width, but I think your CSS fix is better. I tested it out locally and it works, let's go with that.

Change 525583 had a related patch set uploaded (by MSantos; owner: MSantos):
[mediawiki/services/mobileapps@master] Fix image size adjustment on gallery images

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

Change 525583 merged by jenkins-bot:
[mediawiki/services/mobileapps@master] Fix image size adjustment on gallery images

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

Mentioned in SAL (#wikimedia-operations) [2019-07-25T17:53:39Z] <mbsantos@deploy1001> Started deploy [mobileapps/deploy@11d9d4a]: Update service-mobileapp-node to 200a323 (T228938 T228287)

Mentioned in SAL (#wikimedia-operations) [2019-07-25T17:58:19Z] <mbsantos@deploy1001> Finished deploy [mobileapps/deploy@11d9d4a]: Update service-mobileapp-node to 200a323 (T228938 T228287) (duration: 04m 39s)

Change 525650 had a related patch set uploaded (by MSantos; owner: MSantos):
[mediawiki/services/mobileapps@master] Check img is in gallery and remove from blacklist

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

Change 525650 merged by jenkins-bot:
[mediawiki/services/mobileapps@master] Check img is in gallery and remove from blacklist

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

bearND closed this task as Resolved.Tue, Jul 30, 6:35 PM