浮動アクションボタンはスクロールしません

Question

親からの2つのdivタグにFABが含まれています。その1つにtransform：translate3dが使用されています（app.component.html）。
ページをスクロールすると、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

誰もがこの問題に巻き込まれ、解決策はありません。 Googleの素材のテーマが問題hereに対処しています：FAB（または他の浮動要素）とsidenavについてsidenav

内部

Fabを、推奨 アプローチは、スクロール可能な領域の外側にFABを配置することで、 絶対配置してください。言い換えれば

：現在のルート（またはコンポーネント）かどうかを判断するために
1.あなたの "app.component.html" でのFab（または親コンポーネントのHTML）
2.使用* ngIFされますtrueの場合はアクティブ - > FABを表示します。

Answer 2

これらは、.mat-sidenav-contentでCSSトランスフォームを使用します。
CSSトランスフォームは、新しいローカル座標系を作成します。変換削除する

修正：

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

それはハードウェアアクセラレーションを強制する意向をリセットしますけど。