Я столкнулся с небольшой проблемой с Firefox: когда это большие размытые элементы, отображаемые на DOM , все тупо медленно.
Несколько вещей, которые я заметил:
- В некоторых скромных конфигурациях событие reflow может даже заморозить вкладку
- В высокопроизводительном GPU FPS немноголучше, так что я думаю, что этот фильтр активирован с помощью графического процессора
- Chrome и Safari работают очень плавно
- Даже без анимации загрузка ЦП очень высока и любое взаимодействие замедляется
Хорошо, покажите мне код
Убедитесь, что нажали, чтобы развернуть окно, чтобы все изображения могли отображаться , в противном случае анимация останется плавной.
Я создаю событие reflow с анимацией заполнения, чтобы преднамеренно нагружать браузер, но общее взаимодействие медленное.
На более сложной веб-странице, такой как CodePen, FPS намного хуже: https://codepen.io/creaforge/pen/mLPqNg Даже без запуска редактирования преобразования это перо показывает некоторые проблемы с производительностью (попробуйте выбрать блоки кода)
div {
background-color: #eaeaea;
transition: all .5s;
padding: 20px;
}
div:hover {
padding-bottom: 100px;
}
img {
filter: blur(40px);
}
<div>Hover me --> slow animation</div><br/>
<img src="http://www.placecage.com/c/200/600">
<img src="http://www.placecage.com/c/200/610">
<img src="http://www.placecage.com/c/200/620">
<img src="http://www.placecage.com/c/200/630">
<img src="http://www.placecage.com/c/200/640">