Hover работает с перебоями в Safari, когда класс зависания добавлен javascript

У меня есть веб-сайт, который имеет: hover, определенный в CSS для браузеров, которые поддерживают hover. CSS .has_hover a:hover {color:red;} находится в заголовке, а javascript - прямо перед тегом .

var canHover = !(matchMedia('(hover: none)').matches);   
if (canHover) {
  document.body.classList.add('has_hover');
}
blockquote>

В Safari (v11.1.2 в OS X 10.11.6) наведение работает с перебоями (работает для всех ссылок или без ссылок). Если щелкнуть ссылку правой кнопкой мыши, наведение начнет работать только для этой ссылки. Если страница проверена и: hover применяется в инструментах разработчика для какой-либо ссылки, наведение начинает работать для всех ссылок. Если я изменяю размер окна, наведение начинает работать для всех ссылок.

Я думаю, это как-то связано с синхронизацией JavaScript при добавлении класса в тег body. Мне удалось повторить эту проблему в CodePen, задержав выполнение кода JavaScript.

https://codepen.io/ejg/pen/LaNEXK

Есть ли способ заставить Safari распознать hover без повторного рендеринга страницы?

0
задан Emily 2 March 2019 в 15:53
поделиться