Почему смещается текст и неверно отображается в devtools хрома?

Question

[kryamk]

Через раз текст смещается и как-то странно отображается в devtools:

фото

Вот тут https://codepen.io/Kryamk/full/MWdJLzm если перезагружать несколько раз при разной ширине экрана, открытом devtools (не понятно в каких ситуация возникает этот баг). Порой на телефоне тоже смещается. Довольна часто баг воспроизводится когда локально в vscode запустить.

Баг не появляется при выполнении любого из этих условий:

• видео скрыть
  
• превью при классе .play делать не прозрачным, а просто скрывать
  
• при автовоспроизведении видео
  
• добавление класса .play с таймаутом в пол секунды
  
• добавление background-color к picture или img
  
• если picture ниже видео по z-index
  
• если делать прозрачным одновременно и picture и img
  

gpt сказал что возможно как-то связано с оптимизацией рендеринга у хрома:
"Общая закономерность здесь связана с оптимизацией рендеринга и предотвращением перерасчёта макета. Браузер Chrome пытается минимизировать количество операций по перерасчёту и перерисовке, особенно при динамическом изменении элементов."

Comments

[its2easyy]

не воспроизводится