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

Issue 231752 link

Starred by 151 users

Issue metadata

Status: Fixed
Owner:
Closed: Dec 2016
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 2
Type: Launch-OWP
Launch-Accessibility: NA
Launch-Exp-Leadership: ----
Launch-Leadership: ----
Launch-Legal: NA
Launch-M-Approved: 56-Dev , 56-Beta , 56-Stable
Launch-M-Target: ----
Launch-Privacy: NA
Launch-Security: NA
Launch-Test: NA
Launch-UI: NA
Rollout-Type: ----


Sign in to add a comment

Meta bug for position:sticky

Project Member Reported by ojan@chromium.org, Apr 16 2013

Issue description

This is to track work to do on implementing position:sticky.
 

Comment 2 by ebi...@gmail.com, Sep 9 2013

position:sticky landed in FF nightly:
https://twitter.com/FirefoxNightly/status/376808286211022848

Comment 3 by nduca@chromium.org, Oct 31 2013

Labels: Hotlist-Jank
Status: Available
And iOS7

Comment 4 Deleted

Comment 5 by skobes@chromium.org, Oct 31 2013

Cc: skobes@chromium.org

Comment 6 Deleted

Comment 7 Deleted

Comment 8 by vli@chromium.org, Nov 19 2013

Labels: Hotlist-DevRel
Blockedon: chromium:342821
Cc: ojan@chromium.org esprehn@chromium.org tabatkins@google.com
Owner: l.gom...@samsung.com
I learned from comments on https://docs.google.com/a/chromium.org/document/d/1rqbPLVkgR211TAp9dj0zb2SzuzQ9_V8xDk6WggpxyIU/edit that Samsung is interested in driving position: sticky to completion.  That's exciting!

Given that the current spec is incomplete:
http://dev.w3.org/csswg/css-position/#sticky-positioning

It's unclear what the path to shipping is for this feature?  Do we plan to make position: sticky match WebKit's?  Mozilla's?  Do we have a forum under which to agree on how position: sticky should work?
Labels: Type-Launch-OWP OWP-Design-No
Labels: -Type-Bug
The feature dashboard entry is http://www.chromestatus.com/features/6190250464378880
It's fantastic news that Samsung have decided to get this done. This may not be the most exciting feature from vendors' point of view, but it solves a ubiquitous usability problem in web applications that currently requires the use of brittle JS-based hacks and table-element replacements. Frankly, it should have been specced and implemented years ago, and it's worrying that it's taken a non-vendor to finally drive this forward.

Anyway, the correct forum to discuss the behaviour is the W3C's www-style mailing list[1]. I would suggest that Samsung engineers post there about their implementations (they are also implementing position: sticky in WebKit), how they have approached the various issues the ED spec raises, and asking for discussion and clarification on anything that remains unclear.

It would also be useful if they reviewed Mozilla's implementation[2], running it against whatever tests they have developed, and discussing the differences on www-style. Volunteering to co-edit the spec would also probably help to get things moving, as it only has a couple of MS guys editing at the moment, and I'm not sure if position: sticky is one of their priorities?

[1] http://lists.w3.org/Archives/Public/www-style/
[2] https://bugzilla.mozilla.org/show_bug.cgi?id=886646
So if we're going to commit to this feature, it would be good to communicate to the larger blink community what the grand plan looks like.  At least on this bug, if nothing else.  My understanding is that we currently have no compositor support for position: sticky, but it's unclear to me how much we need?  My understanding is that we have an incomplete spec, and no shared test suite so it may be difficult to come to agreement between Gecko, WebKit, IE and Blink here?

In any case, I'm just curious to see the plan. :)  A plan should include some amount of scoping as to how much work we have left to do.  I think a lot of folks are excited about this feature, but currently we have no owner for this feature on the Chrome team, so we will need guidance/ownership from Samsung if this is to be successful in the short term.

Thanks!
Cc: sl.ostap...@samsung.com
Blockedon: chromium:344423
Cc: l.gom...@samsung.com rob.b...@samsung.com
Thanks Eric for pointing us on what else needs to be looked at. Slava (Viatcheslav Ostapenko) will continue working on this and Rob Buis will likely help out as well.

We hope to better scoping soon after we run some more tests and dug trough the open issues with the spec.

Blockedon: chromium:154568
Bug for remaining issues for sticky positioning on "CSS Positioned Layout Module Level 3 Draft" is here: https://www.w3.org/Bugs/Public/show_bug.cgi?id=24787

Blockedon: chromium:335306
Blockedon: chromium:349193
Owner: sl.ostap...@samsung.com

Comment 24 by ojan@chromium.org, Apr 9 2014

Blockedon: chromium:361723
Blockedon: chromium:370632
 Issue 389638  has been merged into this issue.
 Issue 389638  has been merged into this issue.
Project Member

Comment 28 by bugdroid1@chromium.org, Jun 27 2014

The following revision refers to this bug:
  http://src.chromium.org/viewvc/blink?view=rev&rev=177128

------------------------------------------------------------------
r177128 | chrome-bot@google.com | 2014-06-27T20:35:40.356966Z

Changed paths:
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/RenderBlock.cpp?r1=177128&r2=177127&pathrev=177128
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/RenderBox.h?r1=177128&r2=177127&pathrev=177128
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/CSSPrimitiveValueMappings.h?r1=177128&r2=177127&pathrev=177128
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/RenderFlowThread.cpp?r1=177128&r2=177127&pathrev=177128
   M http://src.chromium.org/viewvc/blink/trunk/Source/platform/RuntimeEnabledFeatures.in?r1=177128&r2=177127&pathrev=177128
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/RenderBoxModelObject.cpp?r1=177128&r2=177127&pathrev=177128
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/style/RenderStyleConstants.h?r1=177128&r2=177127&pathrev=177128
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/RenderBoxModelObject.h?r1=177128&r2=177127&pathrev=177128
   D http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css/sticky?r1=177128&r2=177127&pathrev=177128
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/style/RenderStyle.h?r1=177128&r2=177127&pathrev=177128
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/RenderObject.cpp?r1=177128&r2=177127&pathrev=177128
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/frame/FrameView.h?r1=177128&r2=177127&pathrev=177128
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/StaleTestExpectations?r1=177128&r2=177127&pathrev=177128
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/RenderObject.h?r1=177128&r2=177127&pathrev=177128
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/parser/BisonCSSParser-in.cpp?r1=177128&r2=177127&pathrev=177128
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/RenderLayer.cpp?r1=177128&r2=177127&pathrev=177128
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/CSSValueKeywords.in?r1=177128&r2=177127&pathrev=177128
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/LayoutState.cpp?r1=177128&r2=177127&pathrev=177128
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/resolver/StyleAdjuster.cpp?r1=177128&r2=177127&pathrev=177128
   M http://src.chromium.org/viewvc/blink/trunk/Source/devtools/front_end/layers/LayerDetailsView.js?r1=177128&r2=177127&pathrev=177128
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/RenderInline.cpp?r1=177128&r2=177127&pathrev=177128
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/page/scrolling/ScrollingConstraints.cpp?r1=177128&r2=177127&pathrev=177128
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/RenderInline.h?r1=177128&r2=177127&pathrev=177128
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/RenderTableRow.h?r1=177128&r2=177127&pathrev=177128
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/page/scrolling/ScrollingConstraints.h?r1=177128&r2=177127&pathrev=177128
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/compositing/CompositingReasonFinder.cpp?r1=177128&r2=177127&pathrev=177128
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/RenderBox.cpp?r1=177128&r2=177127&pathrev=177128

Remove position: sticky

We would eventually like to implement position: sticky, but the current
implementation isn't designed in a way that integrates well with the existing
scrolling and compositing system. For example, position: sticky relies upon
updateLayerPositionsAfterDocumentScroll to function correctly, but that
function has no other purpose and can otherwise be removed. Similarly,
position: sticky doesn't work at all with composited overflow scrolling, which
is now the default mechanism for driving scrolling in the engine.

Once we've got our scrolling and compositing house in order, we should return
to position: sticky and implement the feature in a way that integrates well
with the rest of the engine. For now, however, this CL removes our current
implementation so we can focus on improving our implementation of the scrolling
features we've already shipped.

R=eseidel@chromium.org, esprehn@chromium.org
BUG= 389638 ,  231752 

Review URL: https://codereview.chromium.org/346603007
-----------------------------------------------------------------

Comment 29 by ojan@chromium.org, Oct 16 2014

Cc: -ojan@chromium.org

Comment 30 by Deleted ...@, Apr 2 2015

right-arrow.png
1.6 KB View Download

Comment 31 by pflo...@gmail.com, May 1 2015

Hi, i'ts been almost an year  since the last update.
Any chance of getting position:sticky on chrome any time soon?
thank you!
Cc: nduca@chromium.org
Labels: Cr-Blink-Layout
Owner: vollick@chromium.org
Status: Assigned
vollick@ is working on a strategy for position: sticky.  Like for snap points we really do want to enable this feature, but we want to do it in a layered way - on top of primitives ("custom layout", "compositor worker", "scroll customization", etc.) which frameworks can leverage to build their own things like this - not just as but-yet-another magical CSS feature.  I.e. we're taking a longer term view to this class of problems - thanks for your patience!

Comment 33 by Deleted ...@, May 20 2015

guys! I'm needing to set position sticky on chrome!
Any ideas?

Comment 34 by Deleted ...@, May 21 2015

@alexchek

This article has a good explanation on position sticky including some polyfill options.

http://www.sitepoint.com/css-position-sticky-introduction-polyfills/
Labels: Hotlist-Interop
Cc: vollick@chromium.org
Owner: flackr@chromium.org
Project Member

Comment 37 by bugdroid1@chromium.org, Jul 16 2015

The following revision refers to this bug:
  http://src.chromium.org/viewvc/blink?view=rev&rev=199029

------------------------------------------------------------------
r199029 | flackr@chromium.org | 2015-07-16T12:29:42.104257Z

Changed paths:
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/CSSValueKeywords.in?r1=199029&r2=199028&pathrev=199029
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/layout/LayoutInline.cpp?r1=199029&r2=199028&pathrev=199029
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/layout/LayoutBlockFlow.cpp?r1=199029&r2=199028&pathrev=199029
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/layout/LayoutInline.h?r1=199029&r2=199028&pathrev=199029
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css/sticky/parsing-position-sticky.html?r1=199029&r2=199028&pathrev=199029
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/testing/InternalSettings.idl?r1=199029&r2=199028&pathrev=199029
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/layout/LayoutBox.cpp?r1=199029&r2=199028&pathrev=199029
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/style/ComputedStyleConstants.h?r1=199029&r2=199028&pathrev=199029
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/layout/TracedLayoutObject.cpp?r1=199029&r2=199028&pathrev=199029
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/paint/DeprecatedPaintLayer.cpp?r1=199029&r2=199028&pathrev=199029
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/layout/LayoutBlock.cpp?r1=199029&r2=199028&pathrev=199029
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/style/ComputedStyle.h?r1=199029&r2=199028&pathrev=199029
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/parser/CSSParserFastPaths.cpp?r1=199029&r2=199028&pathrev=199029
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css/sticky/parsing-position-sticky-expected.txt?r1=199029&r2=199028&pathrev=199029
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/layout/TracedLayoutObject.h?r1=199029&r2=199028&pathrev=199029
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/testing/InternalSettings.cpp?r1=199029&r2=199028&pathrev=199029
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/CSSPrimitiveValueMappings.h?r1=199029&r2=199028&pathrev=199029
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css/sticky/sticky-as-positioning-container-expected.html?r1=199029&r2=199028&pathrev=199029
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/layout/LayoutBoxModelObject.cpp?r1=199029&r2=199028&pathrev=199029
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css/sticky/sticky-as-positioning-container.html?r1=199029&r2=199028&pathrev=199029
   M http://src.chromium.org/viewvc/blink/trunk/Source/platform/RuntimeEnabledFeatures.in?r1=199029&r2=199028&pathrev=199029
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css/sticky/sticky-stacking-context-expected.html?r1=199029&r2=199028&pathrev=199029
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css/sticky/sticky-stacking-context.html?r1=199029&r2=199028&pathrev=199029
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/testing/InternalSettings.h?r1=199029&r2=199028&pathrev=199029
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/layout/LayoutObject.cpp?r1=199029&r2=199028&pathrev=199029
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css/sticky?r1=199029&r2=199028&pathrev=199029
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/layout/LayoutObject.h?r1=199029&r2=199028&pathrev=199029

Add position: sticky as supported position value when CSSStickyPosition is enabled.

BUG= 231752 

Review URL: https://codereview.chromium.org/1212893005
-----------------------------------------------------------------
Blockedon: chromium:512494
Labels: Hotlist-Recharge
This issue likely requires triage.  The current issue owner maybe inactive (i.e. hasn't fixed an issue in the last 30 days).  Thanks for helping out!

-Anthony
Any update on this feature? Chrome Platform Status shows this as "In Development", any ETA?

Comment 41 Deleted

Labels: -Hotlist-Recharge
Yes, it's still in active development. You can follow work on the latest patch here http://crrev.com/1308273010/.

Comment 43 by r...@igalia.com, Apr 7 2016

Blocking: 234207
Project Member

Comment 44 by bugdroid1@chromium.org, Apr 13 2016

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/86b31f0403a7bd7b7a768314b7ba9565af0c9a29

commit 86b31f0403a7bd7b7a768314b7ba9565af0c9a29
Author: flackr <flackr@chromium.org>
Date: Wed Apr 13 15:41:48 2016

Reland main thread position sticky implementation.

Fix the crash and reland the position sticky implementation reviewed in https://codereview.chromium.org/1308273010. TBRing reviewers on unchanged files.

BUG= 231752 
TEST=fast/css/sticky/*
CQ_INCLUDE_TRYBOTS=tryserver.blink:linux_blink_rel
TBR=tdresser,isherman

Review URL: https://codereview.chromium.org/1870663002

Cr-Commit-Position: refs/heads/master@{#386998}

[modify] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/cc/input/main_thread_scrolling_reason.h
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/inflow-sticky-expected.html
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/inflow-sticky.html
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/inline-sticky-abspos-child-expected.html
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/inline-sticky-abspos-child.html
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/inline-sticky-anonymous-container-expected.html
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/inline-sticky-anonymous-container.html
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/inline-sticky-expected.html
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/inline-sticky.html
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/overflow-layer-removed-crash-expected.txt
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/overflow-layer-removed-crash.html
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/remove-inline-sticky-crash-expected.txt
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/remove-inline-sticky-crash.html
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/remove-sticky-crash-expected.txt
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/remove-sticky-crash.html
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/replaced-sticky-expected.html
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/replaced-sticky.html
[modify] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-as-positioning-container-expected.html
[modify] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-as-positioning-container.html
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-both-sides-expected.html
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-both-sides.html
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-bottom-overflow-padding-expected.html
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-bottom-overflow-padding.html
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-container-moved-expected.html
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-container-moved.html
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-display-expected.html
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-display.html
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-flexbox-expected.html
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-flexbox.html
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-grid-expected.html
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-grid.html
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-horizontally-overconstrained-ltr-expected.html
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-horizontally-overconstrained-ltr.html
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-horizontally-overconstrained-rtl-expected.html
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-horizontally-overconstrained-rtl.html
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-left-expected.html
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-left.html
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-margin-changed-expected.html
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-margin-changed.html
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-margins-expected.html
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-margins.html
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-overflow-changed-expected.html
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-overflow-changed.html
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-overflowing-expected.html
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-overflowing.html
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-scrolls-on-main-expected.txt
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-scrolls-on-main.html
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-side-margins-expected.html
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-side-margins.html
[modify] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-stacking-context-expected.html
[modify] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-stacking-context.html
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-table-col-crash-expected.html
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-table-col-crash.html
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-table-row-top-expected.html
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-table-row-top.html
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-table-thead-top-expected.html
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-table-thead-top.html
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-top-expected.html
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-top-margins-expected.html
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-top-margins.html
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-top-overflow-expected.html
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-top-overflow-scroll-by-fragment-expected.html
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-top-overflow-scroll-by-fragment.html
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-top-overflow.html
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-top.html
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-vertically-overconstrained-expected.html
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-vertically-overconstrained.html
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-writing-mode-vertical-lr-expected.html
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-writing-mode-vertical-lr.html
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-writing-mode-vertical-rl-expected.html
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-writing-mode-vertical-rl.html
[modify] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/Source/core/core.gypi
[modify] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/Source/core/css/resolver/StyleAdjuster.cpp
[modify] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/Source/core/frame/FrameView.cpp
[modify] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/Source/core/frame/FrameView.h
[modify] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/Source/core/layout/LayoutBlock.cpp
[modify] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/Source/core/layout/LayoutBlock.h
[modify] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/Source/core/layout/LayoutBlockFlow.cpp
[modify] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/Source/core/layout/LayoutBoxModelObject.cpp
[modify] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/Source/core/layout/LayoutBoxModelObject.h
[modify] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/Source/core/layout/LayoutDeprecatedFlexibleBox.cpp
[modify] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/Source/core/layout/LayoutFlexibleBox.cpp
[modify] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/Source/core/layout/LayoutGeometryMapStep.h
[modify] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/Source/core/layout/LayoutGrid.cpp
[modify] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/Source/core/layout/LayoutTable.cpp
[modify] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/Source/core/layout/LayoutTableRow.h
[modify] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/Source/core/layout/compositing/CompositingInputsUpdater.cpp
[modify] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/Source/core/layout/compositing/CompositingInputsUpdater.h
[modify] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/Source/core/page/scrolling/ScrollingCoordinator.cpp
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/Source/core/page/scrolling/StickyPositionScrollingConstraints.cpp
[add] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/Source/core/page/scrolling/StickyPositionScrollingConstraints.h
[modify] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/Source/core/paint/PaintLayer.cpp
[modify] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/Source/core/paint/PaintLayer.h
[modify] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/Source/core/paint/PaintLayerScrollableArea.cpp
[modify] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/Source/core/paint/PaintLayerScrollableArea.h
[modify] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/Source/core/style/ComputedStyle.h
[modify] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/third_party/WebKit/Source/platform/RuntimeEnabledFeatures.in
[modify] https://crrev.com/86b31f0403a7bd7b7a768314b7ba9565af0c9a29/tools/metrics/histograms/histograms.xml

Hi, I've attached a small example that demonstrates a bug with position: sticky using Chrome 52.0.2712.0 canary (64-bit).

Just scroll down a little bit, so that position sticky kicks in. After that, you won't be able to click on the "sticky" link. Scrolling back to top or changing the element styles in the developer tools fixes the bug.
index.html
6.3 KB View Download

Comment 46 by msten...@opera.com, May 12 2016

Cc: msten...@opera.com
Some of the tests seem flaky, at least when running them here locally.

I get some red sometimes. If I run through the fast/css/sticky/ tests like 5 times, I'm pretty much guaranteed to get something to fail, e.g.

fast/css/sticky/sticky-horizontally-overconstrained-rtl.html
or
fast/css/sticky/sticky-bottom-overflow-padding.html
and probably others too.

Actually, I get them to sporadically fail also when opening them manually with content_shell --enable-experimental-web-platform-features . Just have to hit "Reload" a couple of times.

Comment 47 Deleted

Just someone who would *really* like to see `position: sticky` land in Chrome checking in...
Feedback from happy user:
Tested latest unstable (54.0.2816.0) and sticky table-headers and divs etc. works flawlessly now (with --enable-experimental-web-platform-features of course). Before it was sluggish and I needed to resize the window in order for the sticky header to re-position, but this is apparently fixed now.

Ready for enabling this as default (non experimental) soon?

Thanks.
Still very buggy compared to Firefox...especially when ancestors have height defined.


Comment 51 by phistuck@gmail.com, Aug 26 2016

#50 -
If you can provide actual code (instead of just a description) that fails, it may be fixed sooner.
Re #45, I've tried your demo but I was able to click on the link after scrolling down. Does this still repro.

Re #50, #51, Agreed, if you can provide a website or html code on which it is buggy it would be very helpful. I am not aware of any bugs with the current implementation but we can't turn it on yet because it forces scrolling on the main thread for the sticky position update.

I'm actively working on doing the sticky position update on the compositor ( issue 512494 ) so that we can turn this on.
This WebKit bug
https://bugs.webkit.org/show_bug.cgi?id=155496
is reproducible in Chrome 52, after enabling position sticky.

The link to the testcase is https://bugs.webkit.org/attachment.cgi?id=274104

I've read there is a tool to migrate a WebKit bug to Blink, I can do that if it's worthwhile.


Re #53, on Chrome 55 that test case seems to work - I suspect I fixed this in  issue 606732  in which case Chrome 54 and later should have the fix.
#53 - for future reference, here is the tool (not sure it still works, did not try) -
https://chrome.google.com/webstore/detail/webkit-bugzilla-bug-migra/oppbkaiopjpjhoianniidnggmcmfalef
Cc: -msten...@opera.com
#51 and #52

Sorry, as it is in development, I thought you knew about most of the bugs. Here is an example (http://plnkr.co/edit/sgIfIM4wRt69BwvpY5u9?p=preview) It's using Angular 2 and a layout called golden-layout. The navigation bar and the footer should be sticky (you can open it in firefox to see the proper behavior)
#57
I don't se this problem using 54.0.2840.14, both header and footer are sticky.
Hm, I see now that the footer was a div, below the table. In my tests I don't get tfoot working with position-sticky at all, is this meant to work?
#59 Please use firefox to see the correct behavior! BTW where is this 54 version of chrome? I'm on Windows and the version is still 53...
Chrome 54 is the current beta release. See this for more information -
https://www.chromium.org/getting-involved/dev-channel
Note that beta and dev releases replace your stable release.
Canary releases (Chrome 55) will not replace your stable (or beta or dev) release, it will install side by side and may be very buggy sometimes.
#60 I don't se Firefox behaving any different than Chrome 54.0.2840.14 (and now 55.0.2853.0) on Linux.

I've updated to Version 55.0.2853.0 dev (64-bit) now (Linux) and it works the same.
Both 54.0.2840.14 and 54.0.2840.14 are installed as "Google chrome unstable" on Ubuntu and may coexist side by side with the stable version.

Comment 63 by phistuck@gmail.com, Sep 10 2016

Oh, sorry, I assumed you are using Windows (or Chrome OS). Linux can have everything side by side and Android. I am not sure about iOS (irrelevant here) and macOS, though.
OK, then I'm happy to hear that it's working! Will this feature be implemented as default in v54 or v55 or will it sill be part of the experimental flag?
#64 See comment 52, referring issue https://bugs.chromium.org/p/chromium/issues/detail?id=512494
Blocking: 536263
Blockedon: 649102
Blockedon: 649111
Blockedon: 649144
Blockedon: 649146

Comment 71 by tho...@slash7.com, Nov 4 2016

I just downloaded Chrome 56 (Version 56.0.2909.0 canary (64-bit)) which I had not installed before on this computer before (I'm on latest macOS Sierra).

Dev tools say that `sticky` for `position` is an invalid CSS property value. Isn't it supposed to be enabled by default?

This CSS works for me both on Safari and Firefox.
Screen Shot 2016-11-04 at 12.02.47 PM.png
24.8 KB View Download
Position sticky is being enabled in https://codereview.chromium.org/2468283005/, this means it will likely be on in version 56.0.2910.0.
No scrolling to element if position: sticky
sticky.html
1.2 KB View Download
#74 - please, file an issue for this bug and comment here with the issue number.
Labels: Launch-Accessibility-NA Launch-Legal-NA Launch-M-Approved-56-Dev Launch-M-Approved-56-Beta Launch-M-Approved-56-Stable Launch-Privacy-NA Launch-Security-NA Launch-Test-NA Launch-UI-NA
OWP-specific launch (no UI, privacy, etc. implications) approved via blink process for M56
Status: Fixed (was: Assigned)
Sticky is enabled by default and all blocking bugs have been resolved.

Comment 80 Deleted

Thank you everyone for your hard work on this feature! It's been my most-desired CSS feature for over three years and I've been following this thread for a long time. Your contributions will make developing modern web UIs much, much easier.
3000 years.png
677 KB View Download

Comment 82 by tig...@gmail.com, Dec 7 2016

Thank you all!!

Comment 83 by smrea...@gmail.com, Dec 12 2016

Hello, There is a display issue with position sticky with 2x pixel ratio devices such as Apple Retina devices and 4K PCs. I have attached animated gifs showing the problem and a reference html/css implementation.

bad.gif = reference file on a retina device
working.gif = reference file on the same computer but with external display

My version of Chrome is 55.0.2883.87 64-bit. Both Windows 8 and OS X El Capitan exhibit this issue.
working.gif
418 KB View Download
bad.gif
649 KB View Download
sticky-table.html
3.2 KB View Download
Can you a file a new bug at http://crbug.com/new ?

Comment 85 by smrea...@gmail.com, Dec 13 2016

Yes, I created  issue 673538 
"Sticky" is still NOT WORKING PERFECTLY on chrome 56, using javascript to set its position back to relative and then visit offsetTop property will cause rendering issue:

Reproduce steps:
1. open test page https://jsfiddle.net/4mLo9fmg/2/ 
2. scroll a bit to test out the sticky function, at the beginning it should functioning correctly
3. and then click "screw it" button.
4. Try scroll around again.

Expected result:
After #3 the sticky should still working because the position is set back to sticky and top is correctly set.

Actual result:
Sticky element doesn't get rendered correctly despite dom model shows it is at correct position, forcing a repaint by using javascript will cause it to render to correct position, but scroll again the rendering issue come back.

Please file separate bugs for specific issues. Also note that there are several known bugs which have been discovered in 56, most of which are resolved or targeted to be resolved in 57.
# Issue 685658  reported for my finding above
"position: sticky" appears to apply to table elements like thead, tr, etc.  According to https://developer.mozilla.org/en-US/docs/Web/CSS/position#Sticky_positioning:

The effect of ‘position: sticky’ on table elements is the same as for ‘position: relative’. 

Am I misunderstanding the spec?
There is a regression, please check Issue 702927 (works in stable version 57, but is broken now in Canary)

Comment 91 Deleted

Comment 92 Deleted

Project Member

Comment 93 by bugdroid1@chromium.org, Feb 1 2018

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/80bb8eb8df1c58ad4086a61348df66173fa2e87b

commit 80bb8eb8df1c58ad4086a61348df66173fa2e87b
Author: Stephen McGruer <smcgruer@chromium.org>
Date: Thu Feb 01 16:18:10 2018

Remove CSSStickyPosition runtime flag

position:sticky shipped always-on in M56.

Bug:  231752 
Change-Id: I7bff1d34540745a7220358965a933141d6f172e7
Reviewed-on: https://chromium-review.googlesource.com/896143
Reviewed-by: Robert Flack <flackr@chromium.org>
Reviewed-by: Jeremy Roman <jbroman@chromium.org>
Commit-Queue: Stephen McGruer <smcgruer@chromium.org>
Cr-Commit-Position: refs/heads/master@{#533688}
[modify] https://crrev.com/80bb8eb8df1c58ad4086a61348df66173fa2e87b/third_party/WebKit/Source/platform/runtime_enabled_features.json5

Sign in to add a comment