Last modified: 2014-05-18 14:28:28 UTC

Wikimedia Bugzilla is closed!

Wikimedia migrated from Bugzilla to Phabricator. Bug reports are handled in Wikimedia Phabricator.
This static website is read-only and for historical purposes. It is not possible to log in and except for displaying bug reports and their history, links might be broken. See T64689, the corresponding Phabricator task for complete and up-to-date bug report information.
Bug 62689 - Flow: tipsy 'w'est gravity adds a visible dot 9999 pixels down the browser window
Flow: tipsy 'w'est gravity adds a visible dot 9999 pixels down the browser wi...
Status: RESOLVED FIXED
Product: MediaWiki extensions
Classification: Unclassified
Flow (Other open bugs)
master
All All
: Normal minor (vote)
: ---
Assigned To: Matthias Mullie
: design
Depends on:
Blocks:
  Show dependency treegraph
 
Reported: 2014-03-15 02:07 UTC by spage
Modified: 2014-05-18 14:28 UTC (History)
7 users (show)

See Also:
Web browser: ---
Mobile Platform: ---
Assignee Huggle Beta Tester: ---


Attachments

Description spage 2014-03-15 02:07:22 UTC
The CSS in modules/base/styles/actionbox.less that styles a flyout breaks if its arrow points to the west: in both Chromium and Firefox, the browser window gets ~9000 pixels taller and if you scroll down there's a visible dot at the bottom.

The dot comes from the tipsy-arrow:after selector in modules/base/styles/mixins/arrow.less that has 
    content: '.';
    text-indent: -9999px;
The big negative text-indent pushes the '.' offscreen without creating visible content beyond the normal scroll area; but in conjunction with gravity 'w' which rotates the arrow -90deg, the dot appears in the visible browser content a long way down.

The anonymous editor warning (Gerrit change #117846) is the first Flow flyout positioned to the side (the default is north), so we haven't noticed this before. You can reproduce with existing flyouts by changing their gravity: go to a short topic e.g. <https://www.mediawiki.org/wiki/Talk:Sandbox?workflow=rq3egbkuhi9027u8>, click [...] to bring up an action menu, and in the browser's inspector window find the <div class="tipsy-tipsy-n"> at the end of the body tag and change the latter class to "tipsy-w".

There are other glitches with the tipsy flyout arrow positioning:
* The undocumented nw,sw,ne, and se gravities don't position the arrow properly.
* The border bevel doesn't appear on the side of the arrow exactly as in mockups.
* Sometimes a line is visible cutting the arrow off from the main part of the flyout.
Much of this we can leave for fixing when the flyout design migrates to core Agora, tracked in https://trello.com/c/vr0Oai8G
Comment 1 Maryana Pinchuk 2014-03-17 21:39:46 UTC
The edit conflict warning on topic titles was, IIRC, the first tipsy we used and is positioned to the side; we just don't see that one very often because it's so rare for two people to be editing a topic title at the same time :) Does that one also have all these issues?
Comment 2 Gerrit Notification Bot 2014-03-18 13:35:22 UTC
Change 119286 had a related patch set uploaded by Matthias Mullie:
(bug 62689) tipsy 'w'est gravity adds a visible dot 9999 pixels down the browser window

https://gerrit.wikimedia.org/r/119286
Comment 3 Gerrit Notification Bot 2014-03-18 16:48:22 UTC
Change 119286 merged by jenkins-bot:
(bug 62689) tipsy 'w'est gravity adds a visible dot 9999 pixels down the browser window

https://gerrit.wikimedia.org/r/119286
Comment 4 Derk-Jan Hartman 2014-05-18 14:28:28 UTC
The patch was merged, considering this fixed.

Note You need to log in before you can comment on or make changes to this bug.


Navigation
Links