CSS performance issue during manual resizing of a div

Question

I have a div that acts as drawer that the user can pull down from the top of the window, that contains a dozen of buttons with some styling.

the code for expanding/collapsing that div while pulling on it is:

      drawer.style.height = `${Math.min(drawerParams.maxheight,drawerParams.startHeight + event.y - drawerParams.startY)}px`;

It works fine on a computer, but I have serious lagging on a mobile phone. Here is a picture of the chrome devtools for mobile devices:

Here is the structure and CSS for that layout:

<style>
      .main {
        position: relative;
        width: 100%;
        height: 100%;
      }
      .drawer {
        position: absolute;
        top: 0;
        width: 100vw;
        background-color: lightgreen;
        min-height: 7px;
        z-index: 4;
      }
      .drawer-content {
        position: absolute;
        bottom: 7px;
        display: flex;
        flex-wrap: wrap-reverse;
        justify-content: space-between;
      }
      .handle {
        position: absolute;
        width: 100%;
        bottom: 0;
        height: 7px;
      }
    </style>
    
    <div class="main">
      <div class="drawer">
        <div class="drawer-content">
          <div class="button">button1</div>
          <div class="button">button2</div>
          <div class="button">button3</div>
          <div class="button">button...</div>
          <div class="button">button10</div>
        </div>
        <div class="handle">
          <!-- some svg -->
        </div>
      </div>
    </div>

If I set the initial drawer's position to "top:200px", I see that the content is already there, and when pulling on it from that position, I have the same performance issues.

I tried to use transform:translateY() like in this article:link, but it had no effect. (I assume it is because instead of having one translate from the begining of the transition to the end, I have one for each pixel of mouse movement..?)

So the questions are (from the picture):

1: is the browser repainting the div each time the drawer element's height changes?

2: why?

3: what can I change to avoid that?