CSSのバックグラウンドアタッチ：方向がローカル：rtl

Question

私はスクロール可能なdivを持ち、divをスクロールするときにdivの上にシャドウを実装しようとしていました。 https://codepen.io/bennyzhao/pen/iGoBm

この例では、私のために仕事をしましたが、私は遊んでた後、私はdirectionがrtlに設定されているbackground-attachment: localの行動との奇妙な何かを発見しました：

私はcodepenに、この単純な実装を見つけました。奇妙な挙動を示すためにcodepenに、私は非常に簡単な例を作成しました

は： https://codepen.io/Ron537/pen/ZLaqoG

私はこの問題はGoogle Chromeに存在するがMicrosoft Edgeで正常に動作していることに気付きました。あなたが見ることができるようGoogle Chromeと背景が全体のdivの幅を占めているが、いくつかの空白を残していない、 Chrome vs Edge

：ここ

は、画像comparasionです。

これは既知のバグですか？ これには解決策がありますか？

Answer 1

:before擬似要素を使用した解決策があるようです。 ただ.scrollbarから.scrollbar:beforeに勾配を移動：

.scrollbar:before{ 
    content: " "; 
    height: 30px; 
    width: 100%; 
    background: linear-gradient(red, white); 
    background-size: 100% 30px; 
    background-repeat: no-repeat; 
    background-attachment: local; 
    display: block; 
    position: absolute; 
    z-index: -1; 
} 

二つの属性：background-repeat: no-repeat;とbackground-attachment: local;を冗長であるように見えます。

あなたは `ボックスshadow`属性を使用したいcodepen