У меня есть веб-сайт, который написан справа налево, и я хотел бы создать пользовательский индикатор выполнения (используя вложенные элементы <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;
, но ничего не меняется ...
Заранее спасибо за любую помощь.