Мерцание при анимации движения элементов в Windows Chrome - PullRequest
Новая
       24

Мерцание при анимации движения элементов в Windows Chrome

0 голосов
/ 26 сентября 2019

Я анимировал element.style.left в Windows Chrome

Когда я использую requestAnimationFrame для анимации element.style.left абсолютного <div>, анимация не выглядит плавной в версии Google Chrome77.0.3865.90 (Официальная сборка) (64-разрядная версия) в Windows 10.

Передний край анимированного элемента мерцает и выглядит ужасно

Передний край div, кажется, исчезает / мерцаетпока он движетсяКогда он движется в другом направлении, другой край исчезает / мерцает.

Div has missing edge

В Firefox и Microsoft Edge и в моем мобильном Chrome анимациясглаживание без мерцания.

Полный пример кода для демонстрации проблемы

Я написал простую демонстрацию, которая отображает div из стороны в сторону и показывает проблему. 

const element = document.getElementById('example')
var left = 20
var increment = 2

function animationStep(timestamp) {
  if (left < 20 || left > 200) {
    increment = -increment
  }
  left += increment
  element.style.left = (left + 'px')
  window.requestAnimationFrame(animationStep)
}

window.requestAnimationFrame(animationStep)
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Example</title>
  <style>
    body {
      margin: 0;
      background-color: #f0f0f0;
    }
    
    #example {
      background-color: #fff;
      font-family: Arial;
      font-size: 15px;
      top: 50px;
      padding: 6px;
      border: 1px solid black;
      position: absolute;
      border-radius: 5px;
    }
  </style>
</head>

<body>

  <div id="example">Example</div>

  <script>
    // ...as below
  </script>

</body>

</html>

Я что-то не так делаю?

Кто-нибудь знает, что происходит с Chrome в Windows 10?Что-то не так с моим кодом?Если нет, есть ли хорошие рабочие места, чтобы остановить мерцание?Единственное, о чем я могу подумать, это поместить свой div внутри большего div с невидимым фоном.По разным причинам я не хочу использовать CSS-анимацию.

...