Как предотвратить мерцание Chrome при использовании ширины переходов? - PullRequest
Новая
       8

Как предотвратить мерцание Chrome при использовании ширины переходов?

0 голосов
/ 11 ноября 2018

У меня есть веб-сайт, который написан справа налево, и я хотел бы создать пользовательский индикатор выполнения (используя вложенные элементы <div> вместо элемента <progress>).

Мой основной HTML-файл выглядит следующим образом (я включил CSS и JavaScript в один файл): 

<!doctype html>
<html dir="rtl">
<head>
  <title>Flickering issue</title>
  <style>

    body {
      margin: 20px;
      direction: rtl;
    }

    #container {
      width: 50%;
      height: 13px;
      border: 1px solid rgba(0, 0, 0, .1);
      background: rgba(0, 0, 0, .05);
    }

    #progress {
      width: 0;
      height: 100%;
      transition: width 800ms;
      background: linear-gradient(to left, rgb(0, 160, 0), rgb(0, 200, 0), rgb(0, 235, 0));
    }

  </style>
</head>
<body>

  <div id="container">
    <div id="progress"></div>
  </div>

  <script>

      var progress = document.getElementById("progress"),
          curWidth = 0,
          interval = setInterval(updateWidth, 1500);

      function updateWidth() {
        progress.style.width = (curWidth += 4) + "%";
        if (curWidth >= 100) {
          clearInterval(interval);
        }
      }

  </script>

</body>
</html>

В Chrome правый край индикатора выполнения мигает всякий раз, когда ширина обновляется, и это действительно уродливо и раздражает. Эта проблема не возникает в Firefox.

Я искал похожие проблемы в Интернете и заметил, что это распространенная проблема в Chrome. Однако ни одно из найденных мной решений не помогло решить мою проблему.

Я пробовал следующие правила CSS: 

backface-visibility: hidden !important;

transform: translateZ(0) scale(1,1) !important;

transform-style: preserve-3d !important;

, но ничего не меняется ...

Заранее спасибо за любую помощь.

...