背景固定（background-attachment: fixed;）と要素固定（position: fixed;）が効かなくなる問題

背景固定（background-attachment: fixed;）と要素固定（position: fixed;）が効かなくなる問題

新規サイト制作中に起きました。
背景固定（background-attachment: fixed;）が必要で対応し各ブラウザで確認したところChrome以外のブラウザでは効きません。
勝手に動いていきます。

背景固定がダメなのかなと思い、要素固定（position: fixed;）に変更しましたが、やっぱり効きません。
勝手に動いてしまいます。

聞かない原因

原因はtransform要素で囲っていることでした。

HTML

<div class="transform">
	<div class="fixed"></div>
	<!-- /.fixed -->
</div>
<!-- /.transform -->

CSS

.transform {
	transform: rotate(0deg);
}
.fixed {
	position: fixed;
	background-attachment: fixed;
}

ページ遷移の際、アニメーションさせるためにtransformの初期値を設定していましたが、これがジャマになってしまっていたみたいです。
初期値を外したところ、アニメーションにも固定にも問題なかったため外して対応しました。

未だにtransformを使用する際は要素の組み合わせに注意が必要ですね。

新年明けまして、今はもう2月後半。
ほぼ2ヶ月放置でしたが、無理せずに続けていけたらと思いました。

ここまで読んで頂き、ありがとうございましたm(_ _)m