オフセットを設定してグラデーションの背景をレンダリングすると、Firefox と Chrome で反対の結果が得られました。
ここに私のcssコード:
html
{
background:linear-gradient(to bottom, rgba(245,245,245,1) 0%,rgba(255,255,255,0) 8%);
background-position: center top 30px;
}
body
{
background:linear-gradient(to bottom, rgba(255,255,255,0) 92%,rgba(245,245,245,1) 100%);
background-position: center bottom 100px;
}
アイデアは、html 要素と body 要素に 2 つの反対のグラデーションを適用する背景の一種の「引き戸」を適用することです。
Body タグで下のオフセットを設定すると、問題が発生します。Firefox は正の値で上に移動しますが、Chrome は負の値 (または下は正の値) で上に移動します。そのため、2 つの主要なブラウザーの動作は正反対です。
これを解決する方法は?