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 вызывает низкую производительность, так как я удалил его, и страница загружалась нормально.Любые идеи приветствуются.