| Dbrant | |
| Jul 8 2022, 6:48 PM |
| F35453169: Simulator Screen Shot - iPad Pro (11-inch) (3rd generation) - 2022-08-15 at 13.35.39.png | |
| Aug 15 2022, 11:32 AM |
| F35357564: Screen Shot 2022-07-29 at 12.37.30 PM.png | |
| Jul 29 2022, 6:06 PM |
| F35357562: Screen Shot 2022-07-29 at 12.36.15 PM.png | |
| Jul 29 2022, 6:06 PM |
| F35312274: image.png | |
| Jul 8 2022, 6:48 PM |
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:
https://en.wikipedia.org/api/rest_v1/page/mobile-html/Cat
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.
https://en.wikipedia.org/api/rest_v1/page/mobile-html/Quantum_mechanics
https://en.wikipedia.org/api/rest_v1/page/mobile-html/Transcendentalism
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
What was happening here is as follows.
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) {elem.style = ""});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%;
}
}to
@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
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:
Thalassodromeus
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.
iPad issues
We also noticed a space on iPads on many articles after a very specific set of test steps:
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.
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: https://en.wikipedia.org/wiki/Special:WhatLinksHere/Module:Clade
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))
Upd: I notified creators on the dedicated talk page: https://en.wikipedia.org/wiki/Module_talk:Clade
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.
Seems to be happening again, possibly due to https://gerrit.wikimedia.org/r/c/mediawiki/services/mobileapps/+/1015386
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