Page MenuHomePhabricator
Create Task
Maniphest T336264

WikidataPagebanner shrunk due to Desktop improvements
Closed, ResolvedPublic0 Estimated Story PointsBUG REPORT
Actions

Assigned To
None
Authored By
TheDJ
May 9 2023, 1:38 PM
Tags
Referenced Files
F37029155: Screenshot 2023-05-22 at 9.20.22 AM.png
May 22 2023, 4:22 PM
F37029154: Screenshot 2023-05-22 at 9.21.46 AM.png
May 22 2023, 4:22 PM
F37001640: Screenshot 2023-05-16 at 9.33.04 AM.png
May 16 2023, 8:59 PM
F37001639: Screenshot 2023-05-16 at 9.33.10 AM.png
May 16 2023, 8:59 PM
F36989844: Screenshot 2023-05-09 at 15.43.45.png
May 9 2023, 1:48 PM
F36989842: Screenshot 2023-05-09 at 15.44.12.png
May 9 2023, 1:48 PM
F36989840: Screenshot 2023-05-09 at 15.45.19.jpg
May 9 2023, 1:48 PM
Subscribers
Aklapper
Edtadros
Jdlrobson
TheDJ

Description

Original report: https://en.wikivoyage.org/wiki/Wikivoyage:Travellers%27_pub#Shrunk_banners

Steps to replicate the issue (include links if applicable):

What happens?:

Bug 1, for all users: There is a lot of space before the banner.

Bug 2, for all users: The items in de ToC are pretty small and hard to read

Bug 3, for Safari users. The banner seems to be only 20% of the required height

All of this has to do with modifications that desktop improvements has made.

Causes

Bug 1: The vector-body-before-content is a display:block uses overflow:hidden, to create a new block formatting context, which negates the floate of the mw-indicators, which normally would take up 0 height and thus pushes the banner down.

Bug 2: The font-size of contentSub is overridden from 100% to 84% by specificity increase due to zebra-feature wrapping.

Bug 3: The font-size change somehow seems to trigger a subpixel sizing bug in Safari. The width of the image is set to 100% and height to auto, yet with the font size change, it seems that when the responsive sizing applies, it incorrectly pixel rounds the image dimensions. A height of say 126 pixels, becomes 126.24px when that font-size option is set. This causes the image to be larger than its container (this should not be possible, it's clearly a safari bug). Because the image is bigger than the container, it then triggers portrait detection, which in turn sets a margin-top, that causes half the picture to become way to small vertically.

Screenshots
Original Vector:

Screenshot 2023-05-09 at 15.45.19.jpg (1×3 px, 1 MB)

Vector 2022 Chrome:
Screenshot 2023-05-09 at 15.44.12.png (684×1 px, 1 MB)

Vector 2022 Safari:
Screenshot 2023-05-09 at 15.43.45.png (532×1 px, 424 KB)

QA Results - Beta

ACStatusDetails
1✅T336264#8857193

QA Results - Prod

ACStatusDetails
1✅T336264#8871416

Details

SubjectRepoBranchLines +/-
Fix Safari bug with responsive image sizingmediawiki/extensions/WikidataPageBannermaster+14 -5
Fix indent overrides made on #contentSubmediawiki/extensions/WikidataPageBannermaster+2 -2
Customize query in gerrit

Related Objects

Event Timeline

TheDJ created this task.May 9 2023, 1:38 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 9 2023, 1:38 PM
TheDJ updated the task description. (Show Details)May 9 2023, 1:41 PM
TheDJ updated the task description. (Show Details)May 9 2023, 1:48 PM
Jdlrobson added a project: Web-Team-Backlog.May 9 2023, 4:21 PM
Jdlrobson triaged this task as Medium priority.May 9 2023, 4:53 PM
Jdlrobson moved this task from Incoming to Web Team FY2022-23 Q4 Sprint 4 on the Web-Team-Backlog board.
Jdlrobson edited projects, added Web-Team-Backlog (Web Team FY2022-23 Q4 Sprint 4); removed Web-Team-Backlog.
TheDJ added a comment.May 10 2023, 11:11 AM
  1. It seems that voyage actually has a override to font-size: 100%, but due to increased specificity of the the vector-2022 styling rule for 84%, it is no longer applying
  2. This might not be 'just' the font-size triggering. It seems that multiple things that influence the eventual effective size of the element actually do. The best way to fix this, seems to be to have the container of the image set "height: auto", but not set height: auto on the img itself. That means the container height can just adapt to the image height, without the height of the image being 'wrong' overriding the logic.
TheDJ added a comment.EditedMay 10 2023, 12:01 PM

https://en.wikivoyage.org/wiki/User:TheDJ/common.css fixes most issues

  1. is because mw-indicators are now inside a parent in vector-2022. This probably should just be overridden in each Wikivoyage site that uses page banners
  2. this seems mostly because of the zebra wrapping of contentsub, which makes the specificity of MediaWiki:Vector.css not enough (Also, that page should be copied to 2022).
  3. It seems that the font-size does increase the likelihood of triggering this SOOO much that if you restore the font-size, you almost never seem to trigger the bug again

I also cleaned up the indenting of the page banner, which seems unnecessary and is a side effect of its usage of the subtitle. This should be moved into PageBanner extension perhaps, or maybe the page banner should not be using the page-subtitle to begin with. We might have cleaner entry points for adding this content now ? ....

https://en.wikivoyage.org/wiki/MediaWiki_talk:Common.js#GPX_visibility

TheDJ added a comment.May 11 2023, 7:54 PM

Part of this seems related to T316830: [M] Gadgets should have a reliable way to add content to the subtitle I60eb3c7d7f169be2f826d7dc3948de5203e5f303 which deprecated #contentSub and #contentSub2 in favor of #mw-content-subtitle. The follow up for that transition seems to not have taken place.

gerritbot added a comment.May 11 2023, 7:57 PM

Change 919222 had a related patch set uploaded (by TheDJ; author: TheDJ):

[mediawiki/extensions/WikidataPageBanner@master] Fix indent overrides made on #contentSub

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

gerritbot added a project: Patch-For-Review.May 11 2023, 7:57 PM
gerritbot added a comment.May 11 2023, 8:45 PM

Change 919232 had a related patch set uploaded (by TheDJ; author: TheDJ):

[mediawiki/extensions/WikidataPageBanner@master] Fix Safari bug with responsive image sizing

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

Jdlrobson moved this task from Incoming to QA on the Web-Team-Backlog (Web Team FY2022-23 Q4 Sprint 4) board.May 11 2023, 10:26 PM
Jdlrobson subscribed.

Fixes can hopefully be verified soonish on https://en.wikivoyage.beta.wmflabs.org/wiki/Bannerda

TheDJ added a comment.May 11 2023, 10:27 PM

hmm. there is something strange going on with mw-content-subtitle, other than it seemingly being an incomplete migration... For instance MW core styles it as a class, but it is actually an ID...

TheDJ updated the task description. (Show Details)May 11 2023, 10:35 PM
Jdlrobson added a comment.May 11 2023, 10:37 PM
In T336264#8846382, @TheDJ wrote:

hmm. there is something strange going on with mw-content-subtitle, other than it seemingly being an incomplete migration... For instance MW core styles it as a class, but it is actually an ID...

Yep looks like I added the wrong selector and forgot to cleanup after myself :) https://gerrit.wikimedia.org/r/c/mediawiki/core/+/919241

gerritbot added a comment.May 11 2023, 10:38 PM

Change 919222 merged by jenkins-bot:

[mediawiki/extensions/WikidataPageBanner@master] Fix indent overrides made on #contentSub

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

gerritbot added a comment.May 11 2023, 10:41 PM

Change 919232 merged by jenkins-bot:

[mediawiki/extensions/WikidataPageBanner@master] Fix Safari bug with responsive image sizing

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

Maintenance_bot removed a project: Patch-For-Review.May 11 2023, 11:10 PM
Jdlrobson assigned this task to Edtadros.May 16 2023, 1:04 AM
Jdlrobson edited projects, added Web-Team-Backlog (Web Team FY2022-23 Q4 Sprint 3); removed Web-Team-Backlog (Web Team FY2022-23 Q4 Sprint 4).
Jdlrobson added a project: Unplanned-Sprint-Work.
Jdlrobson set the point value for this task to 0.

Edward could you take a look at this on the beta cluster? https://en.wikivoyage.beta.wmflabs.org/wiki/Bannerda Thanks in advance!

Jdlrobson moved this task from Incoming to QA on the Web-Team-Backlog (Web Team FY2022-23 Q4 Sprint 3) board.May 16 2023, 1:04 AM
ReleaseTaggerBot added a project: MW-1.41-notes (1.41.0-wmf.10; 2023-05-23).May 16 2023, 8:02 PM
Edtadros reassigned this task from Edtadros to Jdlrobson.May 16 2023, 8:59 PM
Edtadros moved this task from QA to Ready for Signoff on the Web-Team-Backlog (Web Team FY2022-23 Q4 Sprint 3) board.
Edtadros subscribed.

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Ventura
Browser: Chrome, Safari
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

✅ AC1: Wikidatapagebanner should not be shrunken

Screenshot 2023-05-16 at 9.33.10 AM.png (943×1 px, 463 KB)

Screenshot 2023-05-16 at 9.33.04 AM.png (955×1 px, 451 KB)

Jdlrobson moved this task from Ready for Signoff to QA in Production on the Web-Team-Backlog (Web Team FY2022-23 Q4 Sprint 3) board.May 16 2023, 10:08 PM

Great. We should verify this in production later tomorrow: https://en.wikivoyage.org/wiki/France

Jdlrobson reassigned this task from Jdlrobson to Edtadros.May 16 2023, 10:09 PM
Edtadros closed this task as Resolved.May 22 2023, 4:22 PM
Edtadros removed Edtadros as the assignee of this task.

Test Result - Beta

Status: ✅ PASS
Environment: frwiki
OS: macOS Ventura
Browser: Chrome, Safari
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

✅ AC1: Wikidatapagebanner should not be shrunken

Screenshot 2023-05-22 at 9.21.46 AM.png (610×1 px, 592 KB)

Screenshot 2023-05-22 at 9.20.22 AM.png (610×1 px, 586 KB)

Edtadros updated the task description. (Show Details)May 22 2023, 4:24 PM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL