浮动操作按钮不滚动

Question

I have a FAB contained in two div tags from parent ( app.component.html ) where one of them uses transform: translate3d.
When scrolling down the page, the FAB is 'stuck' and doesn't scroll.

I want this FAB to overlay this entire HTML page (specifically: <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>

(Native image upload didn't work)
Here's how it looks before & after scroll:

Before
After

Note:
Similar but not duplicate
Related
Also Related

Answer 1

They use CSS transform on .mat-sidenav-content.
CSS transform creates a new local coordinate system.

Fix to remove transform:

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

Though it resets their intention to force hardware acceleration.

Answer 2

In case anyone is caught up with this problem, there is no solution. Google's Material theme has addressed the issue here :

FABs inside sidenav

For a sidenav with a FAB (or other floating element), the recommended approach is to place the FAB outside of the scrollable region and absolutely position it.

In other words:
1. Place the Fab in your "app.component.html" (or parent component's HTML)
2. use *ngIF to determine if the current route (or component) is active, if true -> display the FAB.