Absolute-positioned child of fixed-position container does not move in response to container dimension changes
Reported by
tburn...@hubspot.com,
Nov 3 2016
|
||||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.71 Safari/537.36 Steps to reproduce the problem: 1. Create a container with `position: fixed` and unspecified `top`/`bottom` 2. Give that container a child with `position: absolute` and a position value such as `bottom: 0` or `top: 100%` 3. Change the height of the container, via JavaScript or the dev tools. See http://codepen.io/TrevorBurnham/pen/BQajZO for a working example. What is the expected behavior? The child element should move as the container height changes. This is the behavior in Firefox and Safari. What went wrong? The child element remains in place. However, changing any of its styles causes it to recalculate its position correctly. See attached GIF. Did this work before? N/A Does this work in other browsers? Yes Chrome version: 54.0.2840.71 Channel: n/a OS Version: OS X 10.12.1 Flash Version: Shockwave Flash 23.0 r0 In the app where I first observed this bug, the `position: fixed` container had a specific `top` value. However, I haven't yet been able to produce an isolated test case with this property. In the CodePen example, adding `top: 0` to the container prevents the bug from occurring.
,
Nov 4 2016
Tested with provided URL in chrome # 54.0.2840.71 on MAC 10.11.6 and not able to reproduce the issue.Please find the screen cast for your reference. @ tburnham: Could you please let me know if i have missed anything and if possible, provide us with a valid URL of the issue which would help us to triage the issue further. Thanks in Advance.
,
Nov 4 2016
Sorry, I saved the CodePen in an incorrect state. As you can see in your screencast the #outer container had `position: absolute`; the bug occurs with `position: fixed`. I've corrected that: http://codepen.io/TrevorBurnham/pen/BQajZO
,
Nov 5 2016
I still can't recreate this. If I type in any number and press enter - the container and the child both update their position as expected. Google Chrome 56.0.2906.0 (Official Build) dev (64-bit) Revision 8d817067131214a7c5ea66b95b9aaa30f41f773f-refs/heads/master@{#428890} OS Linux
,
Nov 5 2016
Perhaps the issue only occurs on OS X/high-DPI displays? I've been able to replicate in the latest Chrome on 3 different machines: A 12" MacBook, a 15" MacBook Pro, and a 27" iMac, all sporting Retina displays.
,
Nov 7 2016
Tested the same on mac 10.11.6 chrome version 54.0.2840.87 - observed that on changing dimension the output is as shown in the screenshot1 Canary 56.0.2910.0/ Firefox behaviour : The output is as shown in the screenshot2 Could you please let us know if this is the issue you are facing
,
Nov 7 2016
I can reproduce on Windows 7, using Chrome 54. Normal DPI mode. Looks like style recalculation is missed for the absolutely positioned child when the dimensions of a fixed positioned container changes.
,
Nov 7 2016
Works on ToT. skobes@, could [1] be the one that fixed this? [1] https://chromiumcodereview.appspot.com/2429113002
,
Nov 7 2016
Yes, very likely r426515 fixed this. Verified in canary (56.0.2912.0). |
||||||
►
Sign in to add a comment |
||||||
Comment 1 by shrike@chromium.org
, Nov 3 2016