[css-position] Sticky positioning when constraining flow box is not in containing block chain

[Loirooriol]

Consider this code: http://jsfiddle.net/4r6ubdvo/

<div id="scroll">
  Scroll
  <div id="fixed">
    Fixed
    <div id="sticky">Sticky</div>
  </div>
</div>

#scroll {
  overflow-y: scroll;
  height: 100px;
  border: 3px solid;
  margin-top: 50px;
}
#scroll::after {
  content: '';
  display: block;
  height: 400px;
}
#fixed {
  position: fixed;
  background: #ff0;
  height: 100px;
  top: 0;
  left: 100px;
  border: 3px solid;
}
#sticky {
  position: sticky;
  top: 0;
  background: #0ff;
  border: 3px solid;
}

The "flow box which are used to constrain" the stickily positioned element #sticky is #scroll. However, between them there is a fixed positioned element , #fixed. Therefore, #scroll is not in the containing block chain of #sticky and scrolling #scroll does not affect the position of #fixed.

How should #sticky react to this?

According to https://drafts.csswg.org/css-position/#sticky-pos,

A rectangle is computed relative to the containing block of the stickily positioned element, by insetting its flow box rectangle on each side by offsets computed from the left, right, top and bottom properties of the stickily positioned element.
The intersection is taken between the resulting rectangle, and the containing block of the stickily positioned element. The result, termed the the sticky-constraint rectangle, is a rectangle used to constrain the location of the stickily positioned element.

So the sticky element should be shifted downwards in order to appear inside #scroll. This is what Chromium does, however, scrolling #scroll moves #sticky. I guess it tries to counteract the scrolling without realizing it had no effect due to the fixed ancestor.

In Firefox, #scroll does not constrain #sticky because it's not in the containing block chain. If you add transform: scale(1) so that it generates a containing block for fixed descendants, then it constrains. http://jsfiddle.net/4r6ubdvo/1/

I think Firefox's behavior makes more, sense, i.e. redefine https://drafts.csswg.org/css-position/#sticky-position to

A stickily positioned box is positioned similarly to a relatively positioned box, but the offset is computed with reference to the nearest ancestor in the containing block chain with a scrolling box, or the viewport if no ancestor has a scrolling box.

[jonjohnjohnson]

@Loirooriol I had to add body {min-height: 120vh;} to your example in chromium to see what you meant by...

I guess it tries to counteract the scrolling without realizing it had no effect due to the fixed ancestor.

But I completely agree, gecko exhibits the best way to handle context chaining in all cases.

[jonjohnjohnson]

@Loirooriol Before I file an interop issue with gecko of sticky behavior inside of fixed position compared to blink in this case, I wonder if you have any further thoughts?

http://jsfiddle.net/2sm4t8fa/

Though blinks implementation is probably a bit more complex, it could be a really useful "feature" where authors are effectively able to have efficient cross axis scroll effects? This makes me reconsider my agreement with your suggestion to use the "containing block chain".

[Loirooriol]

@jonjohnjohnson I'm not opposed to such a feature, but I think it should be independent from sticky positioning.

What Blink does with http://jsfiddle.net/4r6ubdvo/ just doesn't make sense to me. Not sure if you can reproduce properly, you shouldn't need body {min-height: 120vh;} which adds viewport scrollbars, you are supposed to scroll #scroll instead.

[jonjohnjohnson]

Definitely can reproduce properly, I see how when you load your test case and don't scroll anything, the resting position of your aqua "sticky" block, which is a child of the yellow fixed element, is constrained by the top of the "scroll" container in blink, but not in gecko or webkit.

All I'm saying with having the body scroll by adding body {min-height: 120vh;} is that it allows us to visualize how that containment behaves as you scroll in blink. Scrolling "scroll" in any browser doesn't show any sticky movement as far as I can see. The first case you link http://jsfiddle.net/4r6ubdvo/.

The case I'd posted just shows a *benefit of blinks behavior in sticky chaining through fixed position as well as transforms (related to #3186).

[Loirooriol]

This is what I see in Blink when I scroll #scroll:

[jonjohnjohnson]

This is what I see in Chrome Canary 73.0.3662.0 on macOS 10.12.6

Scrolling #scroll

Scrolling the viewport

[jonjohnjohnson]

Now I'm wondering if you see something different than me here http://jsfiddle.net/2sm4t8fa/ 🤣

[wangxianzhu]

Blink has a bug https://crbug.com/881555. The goal is to follow the containing block chain. The current behaviors shown in the previous comments are not intended.