Создает ли анимация CSS3 утечки памяти? - PullRequest
0 голосов
/ 17 октября 2018

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...