Page MenuHomePhabricator
Create Task
Maniphest T298371

Viewport overflow because of data-mw-comment-start/end
Closed, ResolvedPublicBUG REPORT
Actions

Assigned To
Esanders
Authored By
TheDJ
Dec 29 2021, 3:46 PM
Tags
Referenced Files
F35043375: emptyheader.png
Apr 8 2022, 7:40 AM
F34899658: Screenshot 2021-12-29 at 16.33.34.png
Dec 29 2021, 3:46 PM
F34899661: Screenshot 2021-12-29 at 16.33.23.png
Dec 29 2021, 3:46 PM
Subscribers
Aklapper
Esanders
Marc
Masumrezarock100
matmarex
Pikne
TheDJ

Description

List of steps to reproduce (step by step, including full links if applicable):

  • Use Safari (responsive mode or an iPhone SE 2019)
  • Visit https://meta.m.wikimedia.org/wiki/Community_Wishlist_Survey/FAQ (mobile, minerva skin)
  • Make sure the window is about the width of the heading "About the survey and the team" or likely any other h2 heading the width of the viewport
  • You get a tiny viewport overflow because the h2 doesn't break its line

What happens?:

  • I suspect this is because data-mw-comment-start/end add a tiny amount of inline spacing, or there is a bug with the measuring in Safari..
  • Setting display:none on them makes the viewport overflow disappear.

Details

SubjectRepoBranchLines +/-
Make comment markers inline-block to fix comment wrapping in Safari (in headings only)mediawiki/extensions/DiscussionToolsmaster+10 -0
Revert "Make comment markers inline-block to fix comment wrapping in Safari"mediawiki/extensions/DiscussionToolsmaster+0 -8
Make comment markers inline-block to fix comment wrapping in Safarimediawiki/extensions/DiscussionToolsmaster+8 -0
Customize query in gerrit

Related Objects

Event Timeline

TheDJ created this task.Dec 29 2021, 3:46 PM
Restricted Application added subscribers: Masumrezarock100, Aklapper. · View Herald TranscriptDec 29 2021, 3:46 PM
TheDJ added a comment.Dec 29 2021, 3:46 PM

Screenshot 2021-12-29 at 16.33.34.png (1×2 px, 1 MB)

After setting display:none;
Screenshot 2021-12-29 at 16.33.23.png (1×2 px, 921 KB)

• ppelberg added a project: Editing-team (Kanban Board).Jan 27 2022, 4:30 PM
• ppelberg moved this task from Incoming to Upcoming on the Editing-team (Kanban Board) board.
• ppelberg moved this task from Backlog to Triaged on the DiscussionTools board.
Esanders triaged this task as Low priority.Feb 25 2022, 12:21 PM
Esanders subscribed.

The edit icon being inline is an edge case probably caused by this particular page being wrapped in a big <div>. Normal <h2>'s still work fine, so I don't think this is very high priority.

Esanders added a comment.Mar 18 2022, 2:31 PM

We can't hide these markers, but setting the marker to display:inline-block also fixes the layout and appears not to break anything else.

gerritbot added a comment.Mar 18 2022, 2:31 PM

Change 771904 had a related patch set uploaded (by Esanders; author: Esanders):

[mediawiki/extensions/DiscussionTools@master] Make comment markers inline-block to fix comment wrapping in Safari

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

gerritbot added a project: Patch-For-Review.Mar 18 2022, 2:31 PM
Esanders claimed this task.Apr 1 2022, 8:19 AM
Esanders moved this task from Upcoming to Code Review on the Editing-team (Kanban Board) board.
gerritbot added a comment.Apr 1 2022, 3:44 PM

Change 771904 merged by jenkins-bot:

[mediawiki/extensions/DiscussionTools@master] Make comment markers inline-block to fix comment wrapping in Safari

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

matmarex moved this task from Code Review to Ready for Sign Off on the Editing-team (Kanban Board) board.Apr 1 2022, 3:47 PM
matmarex edited projects, added Skipped QA; removed Patch-For-Review.
ReleaseTaggerBot added a project: MW-1.39-notes (1.39.0-wmf.6; 2022-04-04).Apr 1 2022, 4:00 PM
• ppelberg closed this task as Resolved.Apr 2 2022, 12:56 AM
Marc subscribed.Apr 8 2022, 6:47 AM

Setting the marker to display:inline-block appears to break something else after all. An empty inline element in front of a <div> block is invisible, but an empty inline-block element in front of a <div> block appears to cause a quite visible space. B.t.w. I'm not sure if this is only the case with <div> blocks.

Is it possible to narrow the above fix to the browser/system/circumstances it is intended for?

Pikne subscribed.Apr 8 2022, 7:40 AM

There also an exessive whitespace in front of headerless first comment at the top of page, where display:inline-block apparently applies to an empty header:

emptyheader.png (295×803 px, 20 KB)

matmarex mentioned this in T305721: Empty space added above talk page comments in some cases (page without initial header; before some templates; in a gallery).Apr 8 2022, 5:02 PM
matmarex subscribed.

These issues are now filed as T305721: Empty space added above talk page comments in some cases (page without initial header; before some templates; in a gallery)

gerritbot added a comment.Apr 11 2022, 12:32 PM

Change 778637 had a related patch set uploaded (by Esanders; author: Esanders):

[mediawiki/extensions/DiscussionTools@master] Revert "Make comment markers inline-block to fix comment wrapping in Safari"

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

gerritbot added a project: Patch-For-Review.Apr 11 2022, 12:32 PM
Esanders reopened this task as Open.Apr 11 2022, 12:33 PM
Esanders moved this task from Ready for Sign Off to Ready to Be Worked On on the Editing-team (Kanban Board) board.
gerritbot added a comment.Apr 11 2022, 7:20 PM

Change 778637 merged by jenkins-bot:

[mediawiki/extensions/DiscussionTools@master] Revert "Make comment markers inline-block to fix comment wrapping in Safari"

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

ReleaseTaggerBot edited projects, added MW-1.39-notes (1.39.0-wmf.7; 2022-04-11); removed MW-1.39-notes (1.39.0-wmf.6; 2022-04-04).Apr 11 2022, 8:00 PM
matmarex removed a project: Patch-For-Review.Apr 11 2022, 8:35 PM
gerritbot added a comment.May 12 2022, 12:33 AM

Change 791101 had a related patch set uploaded (by Bartosz Dziewoński; author: Bartosz Dziewoński):

[mediawiki/extensions/DiscussionTools@master] Make comment markers inline-block to fix comment wrapping in Safari (in headings only)

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

gerritbot added a project: Patch-For-Review.May 12 2022, 12:33 AM
matmarex removed projects: MW-1.39-notes (1.39.0-wmf.7; 2022-04-11), Skipped QA.May 12 2022, 12:34 AM
matmarex moved this task from Ready to Be Worked On to Code Review on the Editing-team (Kanban Board) board.
gerritbot added a comment.Aug 3 2022, 2:22 PM

Change 791101 merged by jenkins-bot:

[mediawiki/extensions/DiscussionTools@master] Make comment markers inline-block to fix comment wrapping in Safari (in headings only)

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

Esanders moved this task from Code Review to QA on the Editing-team (Kanban Board) board.Aug 3 2022, 2:50 PM
Esanders added a project: Editing QA.
Esanders moved this task from Inbox to Low Priority on the Editing QA board.
ReleaseTaggerBot added a project: MW-1.39-notes (1.39.0-wmf.25; 2022-08-15).Aug 3 2022, 3:00 PM
EAkinloose edited projects, added Verified; removed Editing QA.Aug 30 2022, 7:29 AM
EAkinloose moved this task from QA to Ready for Sign Off on the Editing-team (Kanban Board) board.
• ppelberg closed this task as Resolved.Aug 31 2022, 12:49 AM
matmarex added a project: Browser-Support-Apple-Safari.Sep 8 2022, 5:13 PM
matmarex mentioned this in T234109: Section edit link missing when long section title doesn't wrap before viewport right margin.
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