1

I have used will-change: transform on a parent element which has made scrolling smooth. But there are some child divs that don't have the static position anymore despite using position: fixed.

For the demonstration, I have created this basic webpage.

enter image description here

Note when I scroll down the red box, the yellow and green boxes go out of the viewport.

Code:

<style>
.app {
  background: silver;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  z-index: 99;
  will-change: transform;
}

.yellow-box-left .green-box-right {
  width: 250px;
  max-width: 250px;
}

.yellow-box-left {
  position: fixed;
  left: 0px;
  top: 0px;
  background: yellow;
}

.green-box-right {
  position: fixed;
  right: 0px;
  top: 0px;
  background: greenyellow;
}

.red-box-middle {
  min-height: 100%;
  margin-right: 250px;
  margin-left: 250px;
  position: relative;
  background: indianred;
}

</style>
<html>
  <div class="app">
    <div class="yellow-box-left">
      <!-- A list of words -->
    </div>
    <div class="red-box-middle">
      <!-- A long list to make this scrollable -->
    </div>
    <div class="green-box-right">
      <!-- A list of words -->
    </div>
  </div>
</html>

How can I keep these child divs in a fixed position?

Hashir Sarwar
  • 1,115
  • 2
  • 14
  • 28
  • Using fixed positioning inside of an element which is subject to a transform of any kind doesn't work well. Maybe only apply the `will-change: transform` to the red-box-middle. – EvanMorrison Jul 17 '20 at 03:31
  • 1
    Doesn't seem to be something well supported based on this article: http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/ – Robert Cooper Jul 17 '20 at 03:37
  • read until the end of the accepted answer – Temani Afif Jul 17 '20 at 08:22

1 Answers1

0

For the example you provided, I managed to fix it by moving the will-change: transform to .red-box-middle.

Anirudha Saraf
  • 41
  • 7