javascript - float 操作按钮不滚动

Question

我有一个包含在两个 div 中的 FAB来自父级 ( app.component.html ) 的标签，其中一个使用 transform: translate3d.
向下滚动页面时，FAB 会“卡住”并且不会滚动。

我希望这个 FAB 覆盖整个 HTML 页面(特别是:<div class="page-content">)
HTML:

  <div cdk-scrollable="" class="mat-sidenav-content" ng-reflect-ng-style="    " style="margin-left: 0px; margin-right: 0px; transform:     translate3d(0px, 0px, 0px);">
      <div class="page-container">
        <router-outlet></router-outlet>
    <app-carbuilder _nghost-wxw-148="">
            <button style="position: absolute;bottom: 16px;right: 16px;z-index: 5" data-toggle="collapse" data-target="#demo"  aria-expanded="false" aria-controls="demo" md-fab>
            <md-icon>
              directions_car
            </md-icon>
          </button>
        <div class="page-content">
            <p>content</p>
    </div>

(原生图片上传失败)
这是滚动前后的样子:

Before
After

注意:
Similar but not duplicate
Related
Also Related

Answer 1

他们在 .mat-sidenav-content 上使用 CSS 转换。
CSS 变换创建一个新的局部坐标系。

修复删除转换:

.mat-sidenav-content {
    transform: none !important;
}

虽然它重置了他们强制硬件加速的意图。