Intent to Ship: CSS position: sticky

427 views
Skip to first unread message

Robert Flack

unread,
Oct 31, 2016, 10:54:40 AM10/31/16
to blink-dev

Contact emails

fla...@chromium.org, vol...@chromium.org


Spec

http://www.w3.org/TR/css3-positioning/


Summary

position: sticky is a new way to position elements and is conceptually similar to position: fixed. The difference is that a stickily positioned element behaves like position: relative within its parent, and only sticks to the viewport as far as its parent container allows.


Link to “Intent to Implement” blink-dev discussion

Intent to Implement


Is this feature supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?

Yes


Interoperability and Compatibility Risk

No interference with pre-exisitng APIs.

Internet explorer: Public support

Firefox: Shipped

Safari: Shipped (prefixed)

Web developers: Positive


OWP launch tracking bug

https://crbug.com/231752


Entry on the feature dashboard

Rick Byers

unread,
Oct 31, 2016, 5:17:44 PM10/31/16
to Robert Flack, blink-dev
Yay!  Couple questions:

On Mon, Oct 31, 2016 at 10:54 AM, Robert Flack <fla...@chromium.org> wrote:

 

Summary

position: sticky is a new way to position elements and is conceptually similar to position: fixed. The difference is that a stickily positioned element behaves like position: relative within its parent, and only sticks to the viewport as far as its parent container allows.


Link to “Intent to Implement” blink-dev discussion

Intent to Implement


Is this feature supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?

Yes


Interoperability and Compatibility Risk

No interference with pre-exisitng APIs.

Internet explorer: Public support



Firefox: Shipped

Safari: Shipped (prefixed)


What's the status of interop testing against these other implementations?  Are you aware of any differences in behavior?  Have we been sharing tests between the implementations at all?

Chris Harrelson

unread,
Oct 31, 2016, 6:01:00 PM10/31/16
to Rick Byers, Robert Flack, blink-dev
Going to recuse myself from this one as I was involved in the implementation.

On Mon, Oct 31, 2016 at 2:17 PM, Rick Byers <rby...@chromium.org> wrote:
Yay!  Couple questions:

On Mon, Oct 31, 2016 at 10:54 AM, Robert Flack <fla...@chromium.org> wrote:

Probably want to use this link:

 

Summary

position: sticky is a new way to position elements and is conceptually similar to position: fixed. The difference is that a stickily positioned element behaves like position: relative within its parent, and only sticks to the viewport as far as its parent container allows.


Link to “Intent to Implement” blink-dev discussion

Intent to Implement


Is this feature supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?

Yes


Interoperability and Compatibility Risk

No interference with pre-exisitng APIs.

Internet explorer: Public support


Priority=medium - that's a positive signal 

Firefox: Shipped

Safari: Shipped (prefixed)


What's the status of interop testing against these other implementations?  Are you aware of any differences in behavior?  Have we been sharing tests between the implementations at all?

+1, this was my question as well. The implementation had a number of complicated bits in it that took time to get right. It would be really good to have interop tests upstreamed.

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.

Robert Flack

unread,
Nov 1, 2016, 10:21:48 AM11/1/16
to Chris Harrelson, Rick Byers, blink-dev
On Mon, Oct 31, 2016 at 6:01 PM Chris Harrelson <chri...@chromium.org> wrote:
Going to recuse myself from this one as I was involved in the implementation.

On Mon, Oct 31, 2016 at 2:17 PM, Rick Byers <rby...@chromium.org> wrote:
Yay!  Couple questions:

On Mon, Oct 31, 2016 at 10:54 AM, Robert Flack <fla...@chromium.org> wrote:

Probably want to use this link:


Should still be the TR version though right? i.e. https://www.w3.org/TR/css-position-3/#sticky-pos

 

Summary

position: sticky is a new way to position elements and is conceptually similar to position: fixed. The difference is that a stickily positioned element behaves like position: relative within its parent, and only sticks to the viewport as far as its parent container allows.


Link to “Intent to Implement” blink-dev discussion

Intent to Implement


Is this feature supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?

Yes


Interoperability and Compatibility Risk

No interference with pre-exisitng APIs.

Internet explorer: Public support


Priority=medium - that's a positive signal 

Firefox: Shipped

Safari: Shipped (prefixed)


What's the status of interop testing against these other implementations?
  Are you aware of any differences in behavior?  Have we been sharing tests between the implementations at all?

+1, this was my question as well. The implementation had a number of complicated bits in it that took time to get right. It would be really good to have interop tests upstreamed.

Yes, I have discovered several differences in the Safari and Firefox implementations, however for common use cases the behavior is identical. There currently do not seem to be any sticky position tests in csswg-test but I plan to upstream tests for what I believe to be the correct behavior in these tricky cases based on my read of the spec.
 

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.

PhistucK

unread,
Nov 1, 2016, 11:00:17 AM11/1/16
to Robert Flack, Chris Harrelson, Rick Byers, blink-dev

On Tue, Nov 1, 2016 at 4:21 PM, Robert Flack <fla...@chromium.org> wrote:
I have discovered several differences in the Safari and Firefox implementations

Those are exactly the kind of things that annoy web developers ("Hey, the feature seems to be working across browsers. Oh, let us do that other thing with it, too. Oh, wait, that looks different in Safari!!! Crap!!!").​
Have you filed bugs in their issue trackers?



☆PhistucK

Robert Flack

unread,
Nov 1, 2016, 5:03:57 PM11/1/16
to PhistucK, Chris Harrelson, Rick Byers, blink-dev
Oh I agree, I didn't mean to downplay their significance. I have now filed bugs in their trackers :-). I also still plan to include these test cases in csswg tests.

PhistucK

unread,
Nov 1, 2016, 5:14:14 PM11/1/16
to Robert Flack, Chris Harrelson, Rick Byers, blink-dev
Thank you!


☆PhistucK

Geoffrey Sneddon

unread,
Nov 1, 2016, 5:46:16 PM11/1/16
to Robert Flack, Chris Harrelson, Rick Byers, blink-dev
On Tue, Nov 1, 2016 at 2:21 PM, Robert Flack <fla...@chromium.org> wrote:
> On Mon, Oct 31, 2016 at 6:01 PM Chris Harrelson <chri...@chromium.org>
> wrote:
>> On Mon, Oct 31, 2016 at 2:17 PM, Rick Byers <rby...@chromium.org> wrote:
>>> On Mon, Oct 31, 2016 at 10:54 AM, Robert Flack <fla...@chromium.org>
>>> wrote:
>>>> Spec
>>>>
>>>> http://www.w3.org/TR/css3-positioning/
>>>
>>>
>>> Probably want to use this link:
>>>
>>> https://drafts.csswg.org/css-position/#sticky-pos
>
>
> Should still be the TR version though right? i.e.
> https://www.w3.org/TR/css-position-3/#sticky-pos

No; there's pretty much no reason to look at the TR version of any CSS WG spec.

/gsnedders

Rick Byers

unread,
Nov 2, 2016, 5:59:29 PM11/2/16
to Geoffrey Sneddon, Robert Flack, Chris Harrelson, blink-dev
Thanks Rob.  I'm definitely looking forward to us iterating with the other vendors on ironing out any remaining interop issues.  But seems ready to ship to me!   LGTM1.

Dimitri Glazkov

unread,
Nov 2, 2016, 6:00:26 PM11/2/16
to Rick Byers, Geoffrey Sneddon, Robert Flack, Chris Harrelson, blink-dev
LGTM2.

Ian Vollick

unread,
Nov 3, 2016, 10:50:46 AM11/3/16
to Dimitri Glazkov, Rick Byers, Geoffrey Sneddon, Robert Flack, Chris Harrelson, blink-dev
non-owner LGTM.

TAMURA, Kent

unread,
Nov 3, 2016, 10:05:55 PM11/3/16
to Ian Vollick, Dimitri Glazkov, Rick Byers, Geoffrey Sneddon, Robert Flack, Chris Harrelson, blink-dev
LGTM3.

--
TAMURA Kent
Software Engineer, Google


Reply all
Reply to author
Forward
0 new messages