Мерцание элемента веб-инспектора Safari

Question

У меня странная ошибка в сафари.Ошибка визуальная, некоторые стили не отображаются, но когда я проверяю в веб-инспекторе, я замечаю, что затронутые элементы мерцают.

Похоже, что они монтируются и отсоединяются от реакции, но это не так, поскольку инспектор js показывает, что ничего не происходит.

Вместо этого он показывает, что стили становятся недействительными, а затем пересчитываются в цикле.

Что может вызвать это?

Приложены скриншоты.

Спасибо!

Answer 1

Проблема

Это вызвано общим сбросом CSS и недавним изменением в том, как Webkit отображает псевдоэлементы.Возможно, у вас есть что-то вроде этого где-то в вашем css.

*:before, *:after {
  box-sizing: border-box;
}

Любое свойство вызовет эту ошибку, но box-sizing довольно распространено, так как это часть сброса настроек начальной загрузки.

Исправление

Удалить все правила стиля для *:before, *:after.Вы не можете использовать каскад для переопределения этих стилей, так как любое правило стиля для этого селектора вызовет ошибку.

Почему это происходит

Я считаю, что свойства, назначенные *:before, *:after, вызывают последние версииWebkit для оценки этих псевдоэлементов для всех элементов всякий раз, когда происходит перерисовка.Вы можете воспроизвести этот эффект на любом веб-сайте, используя веб-инспектор, чтобы добавить любое правило стиля в селектор *:before, *:after.Когда вы изменяете размер, перерисовки будут срабатывать, и вы увидите, как :before и :after мерцают и исчезают, а элементы без дочерних элементов кратко отображают развернутый треугольник, когда браузер оценивает псевдоэлементы.

Вкл.на страницах с большим количеством элементов это вызывает проблемы с производительностью в браузерах Webkit, поскольку оно эффективно утраивает число элементов, которые оцениваются во время перерисовки.