CSS3 动画会产生内存泄漏吗?



http://jsfiddle.net/q5yncg61/

.vertical-line {
/*	will-change: transform; */
	stroke-dasharray: 2;
	-webkit-animation: dash 25s infinite linear;
	animation: dash 18s infinite linear;
	stroke-width: 2px;
}
.firstCircle {
fill: #333333;
stroke-width: 3px;
stroke-color: #979797;
transform: scale(1);
transform-origin: center center;
animation: pulse 5s linear infinite;
animation-duration: 3s;
animation-iteration-count: infinite;
}
.secondCircle {
animation-delay: 2s;
}
@keyframes dash {
from {
stroke-dashoffset: 100;
}
}
@keyframes pulse {
0% {
transform: scale(0.75);
opacity: 1;
}
50% {
transform: scale(1);
opacity: 0.5;
}
100% {
transform: scale(1.5);
opacity: 0;
}
}
<svg viewBox="0 0 100 179" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g class="draw" stroke="black" stroke-width="5" fill="none" fill-rule="evenodd" stroke-linecap="square">
<line x1="50%" y1="0%" x2="50%" y2="100%" id="vertical-line" stroke="#979797" stroke-width="0.5"></line>
<circle class="firstCircle" stroke="#555555" stroke-width="5" r="25" cx="50" cy="50" fill="#777777"></circle>
<circle class="secondCircle" stroke="#999999" r="25" cx="50" cy="50" fill="#999999"></circle>
</g>
</svg>

在我的本地,它正在运行 jsfiddle 示例的稍微复杂的版本,但相同的元素重复了 5 次,而不是循环。在 Safari 上,风扇以曲速运行后,我一直遇到内存问题。这是从 GPU 而不是 CPU 渲染的问题吗?这是内存泄漏问题吗?

如果没有,是否有任何想法可能导致问题?我已经验证它是导致性能缓慢的 svg,因为我已经删除了它并且页面加载正常。任何见解都值得赞赏。

可以肯定的是,CSS的"过渡"至少在Chrome上会导致明显的内存泄漏。

最新更新