Fixed element incorrectly displays off-center when being transitioned into view

UNCONFIRMED
Unassigned

Status

()

Core
Layout: R & A Pos
UNCONFIRMED
5 years ago
5 years ago

People

(Reporter: graygilmore, Unassigned)

Tracking

20 Branch
x86
Mac OS X
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

5 years ago
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_3) AppleWebKit/537.31 (KHTML, like Gecko) Chrome/26.0.1410.65 Safari/537.31

Steps to reproduce:

Fixed element positioned off-screen with a negative top position. Also being centered with left: 50%; and a negative left margin. When the user scrolls, we trigger a class that brings the fixed element into view with a top position of zero.


Actual results:

The fixed element slides down (as expected) but appears slightly off center.

Here's is an example: http://codepen.io/ggilmore/pen/9a119ace8bd6c659322af0c8a3396988

and here it is without the transition, positioned correctly: http://codepen.io/ggilmore/pen/b0aae89c1b78981d4a4fd763417c171e


Expected results:

The fixed element should transition into view and remain centered. The element snaps back into its target position when resizing the window.

This appears to have been introduced with FF 20.
(Reporter)

Comment 1

5 years ago
Solution found by adding an additional element and using margin: 0 auto; to center that within a 100% width fixed element.

http://codepen.io/ggilmore/pen/363ca02b63fffab39758e660d45d325d
Sounds similar to bug 844178....
Depends on: 844178
You need to log in before you can comment on or make changes to this bug.