Почему изменение pointer events вызывает очень тяжёлый пересчёт стилей?

Работаю над оптимизацией компонента плавного кинетического скроллинга, написанного на vue.js. Как ни странно узким местом стала оптимизация, основанная на добавление pointer-events: none во время скроллинга. Она вполне успешно справляется с нежелательной перерисовкой из за hover эффектов, но в то же время вызывает неприлично тяжёлые 'Recalculate Style' и 'Update Layer Tree', которые на моём 4770k занимают в среднем 3 мс и в целом тормозов анимации не вызывают, но как только дело доходит до тестирования на старом ноутбуке, то там это уже далеко не 3 мс и анимация выглядит довольно плачевно. Уже подумываю над тем, чтобы вместо pointer-events использовать просто перекрывающий всё div. Возможно решить эту проблему как-нибудь элегантнее?
e95da18c7be9493c8969b5decbb774b6.png
  • Вопрос задан
  • 324 просмотра
Пригласить эксперта
Ответы на вопрос 2
Что, если добавлять mousein событие с capture=true и preventDefault? Вариант с дивом вызовет те же самые операции с обновлением слоев и пересчетом стилей.
Ответ написан
Попробуйте использовать contain вкупе с pointer-events. Возможно, это то, что вам нужно.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы