position: sticky; doesn't completely work when combined with flexbox and list items
Reported by
adamlync...@gmail.com,
Apr 11 2017
|
|||||||||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36 Steps to reproduce the problem: 1. Go to http://codepen.io/adam-lynch/pen/bWbYzm. 2. Scroll to the bottom. What is the expected behavior? The headers should be sticky (the whole time). Side note: the blue outline is around the list-items in the outer list. That list shouldn't scroll out of view at all. What went wrong? The "headers" will stick for awhile, then they disappear. Did this work before? N/A Does this work in other browsers? Yes Chrome version: 57.0.2987.133 Channel: stable OS Version: OS X 10.12.3 Flash Version: I tested in Safari and it works. A modified version of the test case in which the stickiness works: http://codepen.io/adam-lynch/pen/ybBxmg (it doesn't use flexbox for the outer list or its items).
,
Apr 12 2017
Able to reproduce this issue on Windows-10, Ubuntu 14.04 and Mac OS 10.12 using chrome latest stable #57.0.2987.133 by following test case provided in the original comment. Observed the blue outline is around the list items. This issue is observed on earlier version of chrome #35.0.1849.0 as well, so considering this is a non-regression issue and marking it as untriaged. Thanks!
,
Apr 12 2017
Apologies, this appears to have nothing to do with lists; see this example where I've swapped the lists and their items for divs: http://codepen.io/adam-lynch/pen/LyYOKR?editors=1100
,
Apr 18 2017
,
Apr 27 2017
Tested this issue on Mac OS 10.12 using chrome latest stable #58.0.3029.81 by following steps mentioned in the original comment, Observed the headers are sticky while scrolling till bottom of the page. adam@ Attaching screen-cast for reference, Could you please check it and let us know what's the issues over here, In case if it's different behavior from your end please provide a scree-shot or screen-cast for reference. Thanks!
,
Apr 27 2017
Hey brajkumar@, I can still reproduce on stable #58.0.3029.81 (same version as you). I'm on Mac 10.12.4 if that makes any difference. Screencast: https://share.viewedit.com/m4LYdqjuZEekuUJnAKMcLy
,
May 8 2017
As per comment #2 removing bisect label.
,
May 8 2017
,
May 8 2017
,
May 23 2017
Re #6, the behavior looks identical to safari 10.1 and does seem to be working correctly. The reason the sticky items scroll off is that they are contained by their containing block - the elements with class 'b' (in your div example) and those divs with class b are only the height of the viewport (as you can see by the blue outlines) so they do indeed scroll off. +eae there is the question of whether horizontally flexing items in a flexbox should get the visible height rather than the scroll height.
,
Jun 19 2017
+cbiesinger to clarify the expected behavior.
,
Jun 20 2018
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
,
Jun 21 2018
cbiesinger@ to triage |
|||||||||||
►
Sign in to add a comment |
|||||||||||
Comment 1 by ranjitkan@chromium.org
, Apr 12 2017