Description
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.
http://jsfiddle.net/ns68kdxt/
<div id="scroll">
Scroll
<div id="transform">
Transform
<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;
}
#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;
}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?