Question

我创建了小网页：

<!DOCTYPE html>
<html>
  <head>
    <style>
       html
       {
        position: fixed; 
       }
       body {
       background: radial-gradient(ellipse at center, rgba(141,141,141,0) 0,rgba(141,141,141,1) 100%);
       }

    </style>
  </head>
  <body>
    <p>TEST</p>
  </body>
</html>

这是一个小例子来说明问题，但我有更大的应用程序在哪里是相同的。当我添加位置：固定到html标签渐变在body标签上停止工作。它适用于Google Chrome，Internet Explorer，Microsoft Edge，但不适用于Firefox。我可以补充说，当改变渐变为背景颜色或backgorund图像时，它可以正常工作。 Firefox版本：53.0.3。你有任何想法如何处理？

Answer 1

Firefox有一些bugs与radial gradient相关，请尝试使用以下语法

background: radial-gradient(ellipse at 50% 50%, #ffffff 0%, #8D8D8D 100%);

或background: radial-gradient(ellipse at center, #ffffff 0%, #8D8D8D 100%);

或尝试使用-moz-后缀，

background: -moz-radial-gradient(ellipse at center, rgba(141,141,141,0) 0, rgba(141,141,141,1) 100%);
background: radial-gradient(ellipse at center, rgba(141,141,141,0) 0, rgba(141,141,141,1) 100%);

Firefox渐变不起作用

1 个答案: