New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 686908 link

Starred by 3 users

Issue metadata

Status: Available
Owner: ----
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Mac
Pri: 3
Type: Bug



Sign in to add a comment

An element with position sticky that has a child with position absolute and a position set (left, top etc...) or a text-indent set is moving the whole parent element

Reported by k...@inverse.com, Jan 30 2017

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.76 Safari/537.36

Steps to reproduce the problem:
1. Go to www.inverse.com
2. Let the page load and watch the header disappear
3. Scroll around, header still not there

What is the expected behavior?
The header is set to have position sticky top: 0; left: 0; which means the header should be visible at the top of the page.

What went wrong?
It seems an element with position: sticky; and a child element with some movement (absolute w/ left/top etc.. or text indent) on it is affecting the parent position sticky element. This should not happen and does not happen on any other browser that supports position sticky. This can be reproduced constantly on chrome

Did this work before? N/A 

Chrome version: 56.0.2924.76  Channel: stable
OS Version: OS X 10.12.2
Flash Version: Shockwave Flash 24.0 r0

Unfortunate because I <3 position sticky

 

Comment 1 by tkent@chromium.org, Jan 30 2017

Components: -UI Blink>Layout

Comment 2 by ajha@chromium.org, Jan 31 2017

Labels: Needs-Triage-M56
Cc: kavvaru@chromium.org
Labels: Needs-Feedback
Unable to reproduce the issue on windows 7, Mac 10.12.2 using chrome version 56.0.2924.76  and canary 58.0.2998.0.
Able to see the header without any issues.Please find the attached screen cast and confirm if anything missed here.

 kam@Could you please once try with clean profile and update the thread if the issue still persists.

Thanks,


686908.mp4
1.7 MB View Download

Comment 4 by k...@inverse.com, Jan 31 2017

Ah yeah, I actually updated the website to remove that css so there wouldn't be any live bugs. If you add a position absolute/relative and a position top/left or text-indent to a child element you can see the bug is still there. For example if you add position: absolute; text-indent: -9999px; to any element with the class text in the header the whole thing will disappear
Project Member

Comment 5 by sheriffbot@chromium.org, Feb 8 2017

Labels: -Needs-Feedback Needs-Review
Owner: kavvaru@chromium.org
Thank you for providing more feedback. Adding requester "kavvaru@chromium.org" for another review and adding "Needs-Review" label for tracking.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot

Comment 6 by e...@chromium.org, Feb 9 2017

Cc: flackr@chromium.org
Labels: -Pri-2 Needs-Reduction Pri-3
Status: Available (was: Unconfirmed)

Comment 7 by cda...@chromium.org, Mar 13 2017

Labels: -Needs-Review
Cleaning up sheriffbot label "Needs-Review" label as a part of modified "Needs-Feedback" sheriffbot rule. [ref bug for cleanup 684919]
Project Member

Comment 8 by sheriffbot@chromium.org, Apr 6 2018

Labels: Hotlist-Recharge-Cold
Status: Untriaged (was: Available)
This issue has been Available for over a year. If it's no longer important or seems unlikely to be fixed, please consider closing it out. If it is important, please re-triage the issue.

Sorry for the inconvenience if the bug really should have been left as Available.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot

Comment 9 by e...@chromium.org, Apr 11 2018

Owner: ----
Status: Available (was: Untriaged)

Sign in to add a comment