Javascript 手动调整div大小期间的CSS性能问题

我有一个div作为抽屉，用户可以从窗口顶部向下拉，其中包含十几个带有某种样式的按钮

拉动div时展开/折叠该div的代码为：

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

它在电脑上工作正常，但我在手机上严重滞后。以下是用于移动设备的chrome开发工具的图片：

以下是该布局的结构和CSS：

<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>

梅因先生{
位置：相对位置；
宽度：100%；
身高：100%；
}
.抽屉{
位置：绝对位置；
排名：0；
宽度：100vw；
背景颜色：浅绿色；
最小高度：7px；
z指数：4；
}
.抽屉内容{
位置：绝对位置；
底部：7px；
显示器：flex；
柔性包装：反向包装；
证明内容：之间的空间；
}
.处理{
位置：绝对位置；
宽度：100%；
底部：0；
高度：7px；
}
按钮1
按钮2
按钮3
按钮
按钮10

如果我将初始抽屉的位置设置为“top:200px”，我会看到内容已经存在，当从该位置拉动它时，我会遇到相同的性能问题

我试图像本文中那样使用transform:translateY（），但没有效果。（我认为这是因为，我没有让一个从过渡开始到结束的平移，而是让鼠标移动的每个像素都有一个平移…）

因此，问题是（来自图片）：

1：浏览器是否会在抽屉元素的高度每次更改时重新绘制div

2：为什么

3：我可以改变什么来避免这种情况