Firefox 打开带有带动画效果的 svg 背景的网页时 CPU 占用巨大

如题,当我尝试访问一个带有动画效果的 svg 背景图片的网页时,CPU 占用率会达到 50% 以上,而同样的网页使用 Chrome 就没有这样的问题。

Firefox 版本 107.0.1 (64-bit),OS openSUSE 20221216,使用「Troubleshoot Mode」启动,开启默认的性能选项。

样本 svg 图像如下:

<svg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink'
    width='1440' height='560'  viewBox='0 0 1440 560'>
    <g mask='url(&quot;#aaa&quot;)' fill='none'>
        <rect width='1440' height='560' x='0' y='0' fill='url(#aaa)'></rect>
        <path d='M698 90.2262146816623L770.3102034820612 152 827 14.180623774186614z'
            fill='rgba(255, 255, 255, 0.3)' class='tf1'></path>
    </g>
    <defs>
        <mask id='aaa'></mask>
        <style> @keyframes float1 { 0%{transform: translate(0, 0)} 50%{transform: translate(-10px,
            0)} 100%{transform: translate(0, 0)} } .tf1 { animation: float1 5s infinite;}
        </style>
    </defs>
</svg>

以及引用它的 HTML 代码:

<! DOCTYPE html>
<html>
<head>
    <style>
        html { background-image: url("./pic.svg");}
    </style>
</head>
</html>

我尝试了使用 Firefox Profiler 录制分析,但是看不懂,而我也仅仅是一个普通用户。大家是否也能够复现这个问题?还是说我需要修改 Firefox 的某些配置来使得它表现得更好一点?

https://bugzilla.mozilla.org/ 报个 bug 吧。

1赞

似乎与背景 的 CSS 默认属性有关,设置 background-size: cover; 可以将 CPU 使用率降下来