background-attachment: fixed;とtransformを使うとedgeで固定背景できない

Question

表題の通り、edgeで固定背景のバグがあるので、回避する方法があれば、教えてほしいです。

<div class="st-skew" id="sc-skew">
	<ul>
		<li>
			<section>
				<h3>title</h3>
				<p>text</p>
			</section>
		</li>
		<li>
			<section>
				<h3>title</h3>
				<p>text</p>
			</section>
		</li>
		<li>
			<section>
				<h3>title</h3>
				<p>text</p>
			</section>
		</li>
	</ul>
</div>

.st-skew{
	transform: skewX(8.6deg) rotate(8.6deg);
	width: 100%;
	background-color: hsl(212, 100%, 27%);
	box-shadow: 0 4px 2px hsla(0, 0%, 0%, 0.2);
	ul{
		margin: 40px auto 70px;
		padding: 40px 0;
		display: flex;
		justify-content: center;
		position: relative;
		z-index: 1;
		background-image: url(../images/image01.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		background-attachment: fixed;
	}
	li{
		width: 250px;
		transform: rotate(-8.6deg) skewX(-8.6deg);
		p{
			line-height: 1.75;
			color: #fff;
		}
	}
	li:nth-child(2){
		margin: 0 40px;
	}
}

こちらの記述でedge以外は動くのですが、
出来ればedgeでも動くようにしたい。

before要素などそこにバックグラウンドを指定して
position:fixed;なども試したが、だめでした。

追記
仕様：斜めに傾けたコンテンツに固定の背景を設定している。
edge以外のブラウザでは、背景は固定されているが、
edgeだと背景は固定ではなくなる。
原因はbackground-attachment: fixedとtransformの混在によるもの

firefoxでもedgeと同様になる

解決案

const fixedScroll = document.querySelector('#sc-skew ul')
window.onscroll = e => {
	fixedScroll.style.backgroundPositionY = `${window.pageYOffset}px`;
}

IE11に対応するなら(アロー関数とテンプレートリテラルが使えないため)

window.addEventListener('scroll', function(){
	fixedScroll.style.backgroundPositionY = window.pageYOffset + "px";
})

ご協力ありがとうございました。

Comments

[defghi1977]

CSSじゃなくてSCSS？

[sauzar18]

そうですね(笑)修正します。

[defghi1977]

で、「どのような動きを想定していてEdgeではどうなっている」かを詳しくお書き下さい.

[x_x]

Edge以外でということですが、Firefoxでも想定通りということでしょうか？

[sauzar18]

想定通りです。

[sauzar18]

あ、想定通りといったのですが、今確認したら動いてないですね。

[x_x]

いやいや、確認してから回答ください

Answer 1

なかなか、完璧な対処が見つかりませんが,

edgeで固定背景のバグがある
原因はbackground-attachment: fixedとtransformの混在によるもの

が正しいなら, background-attachment: fixedを使わずに背景画像の位置を固定できればこの問題は解決するはずです.

そこで, スクロール量をスクリプトで取得し, その値から背景画像の位置を変更する方法を考えました.
(Edgeでの検証はしていません.)

window.onscroll = e => {
	div.style.backgroundPositionY = `${document.documentElement.scrollTop}px`;
}

※この方法を用いた場合, スクロール量をイベントで取得している関係上タイミングによっては背景画像が一瞬ずれるといった現象が発生します.

Comments

[sauzar18]

ありがとうございます。こちらを試してみます。

Answer 2

背景固定のtransformについては、ここでの議論の通り、Firefoxの動きが仕様通りということになります。
https://lists.w3.org/Archives/Public/www-style/2012Jun/0635.html
https://bugzilla.mozilla.org/show_bug.cgi?id=735857

これについて思うところもあると思いますが、Chromeが未実装ということです。

Comments

[sauzar18]

ありがとうございます。firefoxに合わせた設計で実装するのがよさそうですね。