Javascript drop shadow CSS功能使Firefox mobile中的应用程序滞后
我在React中制作了一个pomodoro时钟,并在svg圆圈计时器上应用了一个动画的Javascript drop shadow CSS功能使Firefox mobile中的应用程序滞后,javascript,css,reactjs,svg,svg-filters,Javascript,Css,Reactjs,Svg,Svg Filters,我在React中制作了一个pomodoro时钟,并在svg圆圈计时器上应用了一个动画的过滤器:drop shadow,使其看起来像脉冲 这在我的Firefox桌面浏览器上运行良好,但它使我的整个应用程序在Android设备上的Firefox mobile上变得滞后。该应用程序在Chrome手机浏览器上运行良好 我注意到,即使我删除了动画,并且只对svg元素应用了静态过滤器:drop shadow,应用程序仍然很滞后。有没有办法解决这个问题,或者有没有其他方法可以达到我想要的效果 下面是我的应用程
过滤器:drop shadow
,使其看起来像脉冲
这在我的Firefox桌面浏览器上运行良好,但它使我的整个应用程序在Android设备上的Firefox mobile上变得滞后。该应用程序在Chrome手机浏览器上运行良好
我注意到,即使我删除了动画,并且只对svg元素应用了静态过滤器:drop shadow
,应用程序仍然很滞后。有没有办法解决这个问题,或者有没有其他方法可以达到我想要的效果
下面是我的应用程序的一个示例
相关的svg代码位于pomotorotimer.jsx中,或者在这里:
<svg width="17em" height="17em" viewBox="0 0 20em 20em">
<circle
cx="8.5em"
cy="8.5em"
r="5.8em"
fill="none"
stroke="#FFF"
strokeWidth=".05em"
/>
</svg>
<svg
className="pulse"
width="17em"
height="17em"
viewBox="0 0 20em 20em"
>
<circle
cx="8.5em"
cy="8.5em"
r="5.8em"
fill="none"
stroke="#FFF"
strokeWidth=".2em"
strokeDasharray="36.442em"
strokeDashoffset={36.442 * this.props.offsetModifier + "em"}
/>
</svg>
svg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
transform: rotate(-90deg);
}
@-webkit-keyframes svg_pulse {
0% {
filter: drop-shadow(0 0 0.5em #fff);
}
50% {
filter: drop-shadow(0 0 1.5em #fff);
}
100% {
filter: drop-shadow(0 0 0.5em #fff);
}
}
@keyframes svg_pulse {
0% {
filter: drop-shadow(0 0 0.5em #fff);
}
50% {
filter: drop-shadow(0 0 1.5em #fff);
}
100% {
filter: drop-shadow(0 0 0.5em #fff);
}
}
.pulse {
-webkit-animation: svg_pulse 3s linear infinite;
animation: svg_pulse 3s linear infinite;
}
试着把过滤器放在圆圈上,而不是svg元素上。谢谢你的回答。不幸的是,问题依然存在。