Question

我有一个从右到左书写的网站，我想创建一个自定义进度栏（使用嵌套的<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;

，但是什么都没有改变...

在此先感谢您的帮助。

使用宽度过渡时，如何防止Chrome闪烁？

0 个答案: