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

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

In T228287#5363421, @JoeWalsh wrote:

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

https://github.com/wikimedia/wikimedia-page-library/pull/225

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