Page MenuHomePhabricator

OOUI PopupWidget behaviour when floating over an element that is outside the viewport
Open, Needs TriagePublic

Description

In gerrit 775411 I am trying to introduce a floating post-edit notification attached to the temporary username as required by the IP masking mockup F34933175.

If the temporary username is not in the viewport when the popup is created, say due to section editing, when the widget is later scrolled into view, it is placed off the top of the page, so that only the anchor arrow is visible.

PopupWidget off screen.png (150×1 px, 47 KB)

Firefox box model:

PopupWidget box model.png (361×685 px, 32 KB)

Outer HTML:

<div class="oo-ui-widget oo-ui-widget-enabled oo-ui-labelElement oo-ui-floatableElement-floatable oo-ui-popupWidget-anchored oo-ui-popupWidget oo-ui-popupWidget-anchored-bottom" style="z-index: 4; left: 860.992px; bottom: 745px;"><div class="oo-ui-popupWidget-popup" style="width: 320px; height: auto;"><div class="oo-ui-popupWidget-head"><span class="oo-ui-iconElement-icon oo-ui-iconElement-noIcon"></span><span class="oo-ui-labelElement-label">Temporary account</span><span class="oo-ui-widget oo-ui-widget-enabled oo-ui-buttonElement oo-ui-buttonElement-frameless oo-ui-iconElement oo-ui-buttonWidget"><a class="oo-ui-buttonElement-button" role="button" tabindex="0" rel="nofollow"><span class="oo-ui-iconElement-icon oo-ui-icon-close"></span><span class="oo-ui-labelElement-label oo-ui-labelElement-invisible">Close</span><span class="oo-ui-indicatorElement-indicator oo-ui-indicatorElement-noIndicator"></span></a></span></div><div class="oo-ui-clippableElement-clippable oo-ui-popupWidget-body oo-ui-popupWidget-body-padded" style="max-width: 460px; overflow-y: scroll; height: 0px;"><div>An auto-generated account has been created for you by adding a cookie to your browser. To pick a name of your choice and get more features, consider <a href="/index.php/Special:CreateAccount">creating an account</a>.</div></div></div><div class="oo-ui-popupWidget-anchor" style="left: 170px;"></div></div>

Expected behaviour:

PopupWidget expected.png (222×1 px, 89 KB)

Since this is an important notification, I think the ideal behaviour would be for the notification to be placed at the top of the viewport, as if with position:fixed, until the username is scrolled into view, at which point the popup would follow the element it is attached to.

Event Timeline

The first thing I tried was inserting the popup into the DOM in the middle of the toolbar, rather than floating it, but every skin has its own set of descendant selectors which break content embedded in that way.

As a workaround, you can pass position: 'below', autoFlip: false to the PopupWidget constructor to make it display as expected. I probably won't have the time to investigate why the default behavior doesn't work well in this case, sorry.

Since this is an important notification, I think the ideal behaviour would be for the notification to be placed at the top of the viewport, as if with position:fixed, until the username is scrolled into view, at which point the popup would follow the element it is attached to.

We don't currently have a widget that would do this, you'd have to implement it yourself.

As a workaround, you can pass position: 'below', autoFlip: false to the PopupWidget constructor to make it display as expected.

I did that in April. So this task isn't blocking IP masking.