position: sticky does not work when sticky element is nested in a <section>
Reported by
matt...@mattijsbliek.com,
Feb 20 2017
|
|||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36 Steps to reproduce the problem: See this JSBin for a reduced example: http://jsbin.com/sogubelizu/edit?html,css,output What is the expected behaviour? The element with position: sticky becomes sticky when it reaches top: 0. What went wrong? It does not become sticky. Did this work before? No Does this work in other browsers? No Safari exhibits the same problem, I can’t find any bug reports though. Will add one once this is a confirmed bug. Chrome version: 58.0.3018.0 Channel: canary OS Version: OS X 10.12.3 Flash Version: Shockwave Flash 24.0 r0 I checked the spec to see whether this is expected behaviour, but I could not find any info. If it is it makes position: sticky extremely fragile to use, since you can’t always control the HTML an element is nested in.
,
Feb 21 2017
,
Feb 21 2017
Able to reproduce this issue on windows 10,Ubuntu 14.04 and Mac 10.12.3 using chrome stable M56 - 56.0.2924.87 and earlier version of chrome M30-30.0.1595.0. This is a non-regression issue and marking it as untriaged. Please look into the attached screencast. Thank You...
,
Feb 21 2017
,
Mar 24 2017
The section is the containing block of the sticky div and is the same size which means the sticky div is not allowed to move at all (since sticky doesn't shift beyond the containing block).
,
Mar 24 2017
Thanks for clearing this up. So what you’re saying is that `position: sticky` will not work when the element is nested in a block-level element right? |
|||||
►
Sign in to add a comment |
|||||
Comment 1 by alancutter@chromium.org
, Feb 21 2017Labels: -OS-Mac OS-All