SVG Transition является сбой Chrome (CSS, HTML) - PullRequest
Новая
       24

SVG Transition является сбой Chrome (CSS, HTML)

0 голосов
/ 13 декабря 2018

У меня есть переход svg stroke-dasharray на моем веб-сайте при наведении на элемент, проблема в том, что я нахожу элемент на элементе 4-5 раз, страница вылетает / перестает отвечать.В конце концов я должен убить страницу!Кто-нибудь знает проблему? 

div{
max-width: 200px;
background: tomato;
text-align:center;
}

svg {
  max-width: 100px;
  fill:none;
  stroke: #212121;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dashoffset: 0;
  stroke-dasharray: 0;
  transition-duration: 850ms;
}

div:hover svg {
  stroke-dashoffset:0;
  stroke-dasharray:73;
}
<div>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
<path class="download_st0" d="M21,15v4c0,1.1-0.9,2-2,2H5c-1.1,0-2-0.9-2-2v-4"/>
<polyline class="download_st0" points="7,10 12,15 17,10 "/>
<line class="download_st0" x1="12" y1="15" x2="12" y2="3"/>
</svg>
</div>

Ответы [ 2 ]

0 голосов
/ 13 декабря 2018

Похоже, преобразование в однопутевой svg помогает: 

div {
  max-width: 200px;
  background: tomato;
  text-align: center;
}

svg {
  max-width: 100px;
}

path {
  fill: none;
  stroke: #212121;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dashoffset: 0;
  stroke-dasharray: 0;
  transition: .85s;
}

div:hover path {
  stroke-dashoffset: 0;
  stroke-dasharray: 73;
}
<div>
  <svg id="Layer_1" viewBox="0 0 24 24"><path d="M21 15v4c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2v-4M7 10l5 5 5-5M12 15V3" class="download_st0"/></svg>
</div>
0 голосов
/ 13 декабря 2018

Проблема - это ошибка браузера.

Вот средство отслеживания ошибок Chromium. Сообщите им об этом.

Обратите внимание, что я могу воспроизводить как в стабильном 71, так и в канаре 73 на MacO.

К сожалению, SO ничего не может сделать для вас ...
Если вы хотите потратить время, помогая разработчикам быстро это исправить, вы можете запустить bisect , чтобы проверить, какой коммит вызвал этоошибка, но еще раз это ошибка браузера , так что немного не по теме для нас.

...