css - 背景サイズのパーセンテージが Firefox と Webkit で異なって表示される

Question

背景のグラデーションを使用して、レスポンシブな円形 div (% 幅、0 高さ、% padding-bottom および 50% 境界半径を使用して作成) があります。背景サイズを変更すると、webkit / Firefox で一致しない

background-size 100% / auto を使用すると、両方とも期待どおりに一致します。

しかし、背景サイズを他のサイズに設定すると、それらは異なります（画像に表示されている自動200％）。Safari と Chrome では期待どおりに画像が表示されますが、Firefox では表示されません。ウェブキット: Firefox:

background-size を auto 300% に設定すると、Firefox では正しく表示されますが、webkit では大きすぎます。-moz-background-size を使用して Firefox を別の設定にすると、新しいバージョンでは代わりに background-size が使用されます。-webkit-background-size を使用して Webkit を小さいバージョンに設定すると、background-size プロパティによっても上書きされます

スタイル:

.glasses
    display none
    width 8%
    height 0
    padding-bottom 8%
    border-radius 50%
    position absolute
    top 37.6%
    z-index 3
    transform none
    background linear-gradient(135deg, rgba(234,246,254,1) 25%,rgba(10,39,58,1) 25%,rgba(10,39,58,1) 50%,rgba(10,39,58,1) 50%,rgba(234,246,254,1) 50%,rgba(234,246,254,1) 50%,rgba(234,246,254,1) 75%,rgba(10,39,58,1) 75%,rgba(10,39,58,1) 100%); /* W3C */
    background-size auto 200%
    background-position 0% 0%
    transition none
&.left
    left 40.2%
&.right
    right 40.2%
&:hover
    .glasses
        transition background-position 0.2s
        background-position 0% -200%