Page MenuHomePhabricator

Articles have incorrect horizontal scrolling with blank space.
Closed, ResolvedPublic


If you open any article, it becomes horizontally scrollable for no discernible reason. If you scroll horizontally, it's just empty space to the right of the text.

Interestingly, if you scroll down far enough, the horizontal scrollability disappears, and the article becomes normal again.

For example, open the following URL in a shrunken-down browser window:

image.png (551×502 px, 36 KB)

Event Timeline

If you open any article, it becomes horizontally scrollable for no discernible reason.

Is it the audio elements in the External Links section?

This seems to be independent of audio elements.
I'm seeing it on pretty much all articles, e.g.

Very weirdly, the horizontal scrolling disappears when I scroll down to about ~75% of the article.

I see. I imagine this is fallout from T305357

It looks like there's a fixed with of 640px that only gets adjusted after lazy loading an image.

Change 814187 had a related patch set uploaded (by Vadim Kovalenko; author: Vadim Kovalenko):

[mediawiki/services/mobileapps@master] Articles have incorrect horizontal scrolling with blank space

vadim-kovalenko changed the task status from Open to In Progress.Jul 15 2022, 4:13 PM
vadim-kovalenko claimed this task.
LGoto triaged this task as High priority.Jul 18 2022, 6:38 PM
LGoto moved this task from Needs Triage to Tracking on the Wikipedia-iOS-App-Backlog board.
LGoto subscribed.

What was happening here is as follows.

  • Load page
  • Make sure JS is on
  • JS unhides the (next) section(s) outside the vertical viewport
  • The section has a lazy loaded image block
  • This block is a <span class="pcs-lazy-load-placeholder"> with a hardcoded (original) width attribute that is wider than the page (it is NOT responsive, unlike images)
  • The figure is now a table, so will accommodate to the width of its contents
  • If you scroll down far enough all sections and all images within those sections will eventually load, responsive images kick in and make sure they are no wider than the page.

You can also observe this if you load the page without JS, use the inspector to unhide all sections

Array.from(document.getElementsByTagName('section')).forEach( function(elem) { = ""});

Now the JS lazy loading doesn't kick in, and you can see how the lazy loaded image placeholders are not responsive and fall outside of the viewport.

Loaded images have, which overrides the width set by style attribute on that same element :

@media (orientation: portrait) and (min-device-width: 720px)
  .pcs-widen-image-wrapper {
    width: 60%!important;
    max-width: 60%!important;

Probably requires changing:

@media (orientation: portrait) and (min-device-width: 720px)
.pcs-widen-image-override.pcs-lazy-load-placeholder {
    min-width: 60%;


@media (orientation: portrait) and (min-device-width: 720px)
.pcs-widen-image-override.pcs-lazy-load-placeholder {
    min-width: 60%;
    width: 60% !important;
    max-width: 60%!important;

and similar constraints for other form factors

Change 814187 merged by jenkins-bot:

[mediawiki/services/mobileapps@master] Articles have incorrect horizontal scrolling with blank space

Hi @LGoto!
Patch with the fix has been deployed to prod.
cc: @Tsevener

LGoto moved this task from Tasks from Product Backlog to Needs QA on the iOS-app-v6.9.3 board.
LGoto added a subscriber: ABorbaWMF.

Thanks @vadim-kovalenko !

@ABorbaWMF we've put this in the QA columns for both apps - can you do some testing to make sure this is looking ok now?

Hi @vadim-kovalenko!

Just wanted to give you some findings after our initial testing. @ABorbaWMF may find more areas after he does some deeper testing.

It is greatly improved, so it's good we deployed. There's a couple of cases where I'm still seeing an odd space on the right for iOS:

Go to the "Thalassodromeus" article on EN Wikipedia. I still see a space to the right there on multiple devices and orientations. This must be something specific to this article, because this doesn't happen as widespread on other articles.

Screen Shot 2022-07-29 at 12.36.15 PM.png (596×936 px, 326 KB)

iPad issues
We also noticed a space on iPads on many articles after a very specific set of test steps:

  1. Go to an article (I tested Apollo 4 on EN Wikipedia) on an iPad Simulator while in portrait orientation. I tested on iPad Pro 11-inch, iOS 15.5 simulator.
  2. Hit the button to collapse the table of contents in the bottom toolbar.
  3. Rotate device to landscape. You can now scroll and see a space on the right.

Interestingly this doesn't happen if you first visit the article already in landscape with the table of contents collapsed. It could be that we're doing something weird client-side upon rotation. If you don't see anything web-side that could be causing this, feel free to kick it back to us and we can dig and see if it's something on our end.

Screen Shot 2022-07-29 at 12.37.30 PM.png (856×1 px, 341 KB)

Testing on Android 2.7.50418-r-2022-08-08 and iOS 6.9.3 (1957)

It does seem improved, especially on portrait mode. I am still seeing some horizontal scroll issues on phone devices with certain articles and I am still seeing some issues on tablets. On articles like Thalassodromeus, I see horizontal scrolling on phones while in landscape mode and in both landscape and portrait modes on tablet. However, for articles like Cat and Joanne Woodward, I am seeing no issues on phones or tablets.

Hey @Tsevener , @ABorbaWMF ! As for Thalassodromeus article:
It uses Module:Clade which is not optimized for mobile devices when it comes to rendering pretty long cladograms. Check a full list of articles that also utilize this module:

Found a few of them with exact same issue:


As for Apollo 4 article, I cannot reproduce the issue (tested in the browser, Samsung tablet, and iPad Pro 11 (in the simulator, see the shot))

Simulator Screen Shot - iPad Pro (11-inch) (3rd generation) - 2022-08-15 at 13.35.39.png (1×2 px, 1 MB)

Could you re-check? This might be a cache issue.

Upd: I notified creators on the dedicated talk page:

I relies on the mobile frontend / minerva styling for tables (.content table), which automatically apply overflow settings when tables don't fit. But MF/Minerva only do this up to a certain resolution I believe ? then they'll just expand into the viewport. This probably could be improved by enforcing overflow for the clade through templatestyles.

Change #1019881 had a related patch set uploaded (by Arlolra; author: Arlolra):

[mediawiki/services/mobileapps@master] [WIP] Fix horizontal scrolling regression

Change #1019881 merged by jenkins-bot:

[mediawiki/services/mobileapps@master] Fix horizontal scrolling regression