1329821 - Incorrect position of element with JQuery-ui position(), min-height:100vh and display:flex

Status: RESOLVED INVALID

(Core :: Layout: Block and Inline, defect)

Description

[philippe (part-time)]

Attachment: test case

This affects at least Firefox (45 ~ 52a) on Windows 10; it is *not* reproducible on OS X.

STR:
1. click the ‘click me’ button. Observe the (incorrect) position of the green box. 
The right edge of the square **should** match the right edge of the button. Instead it is offset to the left by ~15px (width of scrollbar?).
 
2. click again  on that button to hide, then click the ‘Toggle Filler Content’ button. The window should show a vertical scrollbar - reduce the height of the window if not.
3. Now click again on the ‘click me’ button. Observe that the green box is positioned correctly…

The ‘click me’ button is inside a flex-context (with `justify-content: flex-end;` ).

`body` is set to min-height:100vh. This is an important component of the issue.

That is not the only trigger though, in a real world layout with have observed the same issue when the `body` has display: flex; flex-flow: column`and nested flexbox content.

Comment 1

[philippe (part-time)]

Possibly related bug: bug 381328 ?

Comment 2

[Daniel Holbert [:dholbert]]

A few observations:
 (1) For me, on Linux, the right edges are only misaligned the *third time* I click the button (after I show, hide, re-show the green box). The very first time I click the button, they're aligned nicely.

 (2) This box is being positioned *manually* (via absolute positioning) at a very specific position, and that position is changed each time I click the button.
   - Initially "left" is unset.
.  - After the first click (to show), it gets left:1306px, and nicely aligned.
   - After the second click (to hide), it gets left:2612px
   - After the third click (to show), it gets left:1301px (5px less than the first click)

 (3) I see the exact same visual behavior in Chrome (55 dev edition).

So it looks like JQuery is managing the position, and it's producing different results for all "showings" after the first one, in both Firefox and chrome.  So this seems more likely to be a JQuery bug than a Firefox bug, I think. A more reduced testcase would help illuminate what's going on, though.

Comment 3

[philippe (part-time)]

(In reply to Daniel Holbert [:dholbert] (away, returning Jan 17) from comment #2)
> A few observations:
>  (1) For me, on Linux, the right edges are only misaligned the *third time*
> I click the button (after I show, hide, re-show the green box). The very
> first time I click the button, they're aligned nicely.

Interesting… maybe. On windows 10 the issue is visible from the first click.

 
>  (2) This box is being positioned *manually* (via absolute positioning) at a
> very specific position, and that position is changed each time I click the
> button.
>    - Initially "left" is unset.
> .  - After the first click (to show), it gets left:1306px, and nicely
> aligned.
>    - After the second click (to hide), it gets left:2612px
>    - After the third click (to show), it gets left:1301px (5px less than the
> first click)

Again, on windows 10, there are slight differences. The visible state is always offset at the same position. The hidden state (after the 1st click) is send offscreen (offset left multiplied by 2) - I’ve no idea why Jquery / jQuery-UI does that.
 
>  (3) I see the exact same visual behavior in Chrome (55 dev edition).

Well after repeatedly testing with a Chromium release build (Opera) on Win10, I can indeed reproduce this - but this time, I need to click 3 times. with Edge,I get very conflicting results (like: 1 in 5 times, and never on first click. And I can reproduce this on macOS (10.11) + Opera & Firefox Dev but ONLY when the system is set to always show a scrollbar (no overlay scrollbars) – which is not the default.

> So it looks like JQuery is managing the position, and it's producing
> different results for all "showings" after the first one, in both Firefox
> and chrome.  So this seems more likely to be a JQuery bug than a Firefox
> bug, I think. A more reduced testcase would help illuminate what's going on,
> though.

You’re probably right that this is a JQuery / JQuery-UI bug, seeing how it happens on different browsers. I’ll mark this bug as invalid then. I’ll reopen if anything changes or more info is available.

PS - What is so special about body { min-height: 100vh; } (the root of all evil in this case) ? If I use the old-style hack `html { height 100%; } body { min-height: 100%; }`, then everything works properly.

Comment 4

[Daniel Holbert [:dholbert]]

(In reply to philippe (part-time) from comment #3)
> PS - What is so special about body { min-height: 100vh; } (the root of all
> evil in this case) ? If I use the old-style hack `html { height 100%; } body
> { min-height: 100%; }`, then everything works properly.

Sorry -- I don't know the answer to this. I don't know how JQuery comes up with their abspos values, so I don't know how choice of units would impact that.

Anyway, thanks for filing & for closing the loop.