Sticky element doesn't work well with scale-CodePudding

I have a div element which is set to 'sticky' to top of its parent div. The parent div is inside a div which is scaled. While everything works as expected if scale is set to 1, the sticky element doesn't stick if the scale is set to non 1 values, such as 1.5 or 0.5.

Please see the code here:

.scale {
  height: unset;
  transform: scale(1.5);
  transform-origin: left top;
  width: calc(66.6667%);
}

.container {
  height: 1200px;
  border: 1px solid;
}

.sticky {
  position: sticky;
  top: 0;
  z-index: 1;
  background: red;
}

<html>
  <body>
    <div class='scale'>
      <div class='container'>
        <div class='sticky'>
          I should stick to top
        </div>
      </div>
      <div>Other parts needed to scale</div>
    </div>
  </body>
</html>

If we set scale to 1.5 (transform: scale(1.5)), the sticky element is moving to the bottom as I scroll the page. If I set scale to 0.5, it will just scroll off the screen. If it's set to 1, everything works fine.

I am wondering how to keep both the 'sticky' and 'scale' working in this scenario. Thanks for any help!

CodePudding user response：

The problem is that you're scaling the parent div, if you use 1 as a scale then the sticky div will move by 1:1 ratio

1.5 as scale will be 1.5:1 ratio so when you scroll by 100px, the sticky div will move 150px, making it go down

0.5 as scale will be 0.5:1 so it so it will move by 50px if you scroll down 100px, making it look like it's moving up