1383447 - position: fixed causes unexpected behavior when moved in and out of frame

Status: UNCONFIRMED

(Core :: Layout, defect, P3)

Description

[Morten Rand-Hendriksen]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36

Steps to reproduce:

See Codepen for example code:

https://codepen.io/mor10/pen/VzZGxW

Nav menu is moved offscreen by shifting the body element to the left and hiding the nav element with display:none. On interaction with a button, the body element is shifted to the right to reveal the nav and a class is appended to the nav element to change its display property to block. 


Actual results:

When the position of the nav element is set to fixed, the nav element when revealed is not visually displayed even though it is available in the DOM. highlighting the nav element in dev tools makes it reveal itself in the browser.

On hiding the nav menu, the menu persists in its current location instead of following the left-direction movement of the parent element before the open class is removed with transitionend


Expected results:

In all other browsers (tested against Chrome, Opera, Safari, Edge, Firefox Mobile, Chrome Mobile) the nav menu appears and slides in and out as expected.