【CSS】Firefoxで background-attachment: fixed; がきかないときに確認したこと

// この記事は、 note に投稿した記事の再掲です。

background-attachment: fixed; を指定した親要素に対して transform プロパティが使われていると fixed がきかない様子。
transform プロパティを設定すると、その子要素が全て relative になってしまうのが原因ぽい？
「スクロールして、要素が画面の中に表示されたらフェードインする」って実装をしたときにハマったのでメモ。

HTML

<div class="contents">
 <div class="bg-fixed"></div>  <!-- fixedしたい背景要素は別にする -->
  <div class="fade-in">        <!-- transformを利用する要素は背景要素は別にする -->
     <p>Hello World!</p>
 </div>
</div>

CSS

css
.contents {
 position: relative;
}

// 背景要素をabsoluteにする
.bg-fixed {
 position: absolute;
 width: 100%;
 height: 100%;
 display: block;
 left: 0;
 top: 0;
 background: url("bg.jpg") no-repeat center top fixed;
 background-size: cover;
}

.fade-in {
 opacity: 0;
 transform: scale(0.8);
 transition: all .3s ease;
}

// 要素がスクロールされて "visible" クラスを付与されたときに適応するスタイル
.fade-in.visible {
 opacity: 1;
 transform: scale(1);
}