[csswg-drafts] [css-position] Sticky positioning with transform between it and reference box

Loirooriol has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-position] Sticky positioning with transform between it and reference box ==
CSS Transforms can distort elements a lot. However, this wasn't a big problem for `top`, `left`, `bottom` and `right` properties, because transformed elements generate a containing block for all descendants.

However, sticky positioning is special because the insets are not calculated with respect to the containing block, but an scrollable ancestor instead. https://drafts.csswg.org/css-position/#sticky-position

This can make things unintuitive, sticking the untransformed element to an edge of the ancestor may not look like stickment at all after the transform.

<details>
<summary><a href="http://jsfiddle.net/ns68kdxt/">http://jsfiddle.net/ns68kdxt/</a></summary>

```html
<div id="scroll">
  Scroll
  <div id="transform">
    Transform
    <div id="sticky">Sticky</div>
  </div>
</div>
```
```css
 #scroll{
  overflow-y: scroll;
  height: 100px;
  border: 3px solid;
  margin-top: 50px;
}
#scroll::after {
  content: '';
  display: block;
  height: 400px;
}
#transform {
  transform: translateX(200px) rotate(90deg);
  transform-origin: 0% 0%;
  background: #ff0;
  height: 200px;
  top: 0;
  left: 100px;
  border: 3px solid;
}
#sticky {
  position: sticky;
  top: 0;
  background: #0ff;
  border: 3px solid;
}
```
</details></br />

Scrolling down moves the sticky element from right to left smoothly in Chromium. Seems OK but unintuitive. It moves discretely and buggy in Firefox.

Should sticky positioning still work in this case? What about similar cases like `contain: strict`, should scrolling an element outside the containment affect a sticky element inside the containment?

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3186 using your GitHub account

Received on Monday, 1 October 2018 11:17:22 UTC