Page MenuHomePhabricator

Above-positioned PopupWidgets are not correctly positioned with a static parent
Open, Needs TriagePublic


I don't know it is a bug of PopupWidget or FloatableElement, or whatever.
PopupWidgets are not correctly positioned when it appends to an element that has position: static style.
position: 'above' option gives a buggy result, but maybe some other options give buggy results, too.

Visit my jsfiddle to see the bug:

(text version below, same as jsfiddle)

<!DOCTYPE html>
    <script src=""></script>
    <script src=""></script>
    <script src=""></script>
    <script src=""></script>
    <link rel="stylesheet" href="" />
      body {
        border: 1em solid red;

      body.relative {
        position: relative;

      .target {
        background: yellow;
        width: 10em;
        margin: auto;
        line-height: 2em;
        text-align: center;
    <input type="checkbox" id="relative" />
    <label for="relative"><code>position: relative;</code></label>
    <div class="target">target</div>
      const popup = new OO.ui.PopupWidget({
        $content: $(`<p>Lorem ipsum.</p>`),
        autoFlip: true, // default
        position: 'above',


      document.querySelector('#relative').addEventListener('change', () => {
        document.body.classList.toggle('relative', this.checked);

Event Timeline

Lens0021 created this task.Jul 2 2020, 3:25 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJul 2 2020, 3:25 PM