translate3dを指定した子孫要素でposition: fixedが効かない

position: fixedがの指定が効かない現象に遭遇したので、調べた内容をメモしておきます。

不具合の発生したコード

.headerと.modalをposition: fixedで配置します。

HTML

<div class="page">
	<header class="header">
		ヘッダー
	</header>
	<main class="contents">
		<div class="modal">
			モーダル的なもの
		</div>
	</main>
</div>

CSS

.header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 40px;
	background: #999999;
}
.contents {
	height: 1000px;
}
.modal {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 300px;
	height: 300px;
	transform: translate(-50%, -50%);
	background: #666666;
}

この状態だと、position: fixedは正しく効いています。
不具合の発生する前のデモページ

.pageに対してtransform: translate3dを指定すると、position: fixedが効かなくなりました。

CSS

.page {
	transform: translate3d(0, 0, 0);
}

position: fixedが効かないデモページ
　

原因

祖先要素の transform プロパティが none 以外に設定されている場合、その祖先要素がビューポートの代わりにこの要素の包含ブロックとして使用されます (CSS Transforms 仕様 を参照)。
position – CSS | MDN

祖先要素にtransform: none以外が設定している場合、position: fixedが効かなくなるようです。
対応策としては、HTMLの構造を変更して、祖先要素にtransformを設定した要素が来ないようにするくらいしかなさそうです。
　

【参考サイト】

• position:fixedの親要素にtransform:translate3d(..)をかけるとバグる – Qiita
• css – 親要素の「transform: translate3d」設定値を変更した場合でも、子要素の位置を position: fixed で固定したい – スタック・オーバーフロー
• position – CSS | MDN