动画元素在较小的屏幕上每隔几个像素更改宽度

Question

我的页面上的视频擦洗手柄在向右或向左动画时显示为宽度变化（显示视频的进度/用户正在擦洗时）。

圈子应该如何随时查看（即使在移动时）：

移动时的样子（每隔几个像素后）：

这是资源处理句柄的 HTML ，以及它的容器（进度条）：

<!-- 
    the 9.67197% is generated via JavaScript;
    as the width of the container (progress bar) increases, the scrub handle stays true 
    to the right of the container;
!-->
<div class="player-scrubber_elapsed" id="player_si02" style="width: 9.67197%;">
    <div role="handle" id="player_cs02"></div>
</div>

和 CSS 用于清理和进度条：

/* progress bar */
.player-scrubber_elapsed{
    position: absolute;
    height: 4px;
    background: rgba(225, 6, 47, 0.87);
}
/* scrub handle */
.player-scrubber_elapsed #player_cs02{
    position: absolute;
    top: -5px;
    right: -6px;
    width: 8px;
    height: 8px;
    border: 3px solid #fff;
    border-radius: 8px;
    background: #e1062f;
    box-shadow: 0 0 7px -1px rgba(0, 0, 0, 0.71);
    cursor: pointer;
    transition: all 120ms ease-out;
}

实例的

JsFiddle ：https://jsfiddle.net/zc5yubbn/

如果有人能告诉我如何防止这个问题，我们将不胜感激。干杯。

注意：我注意到在常规尺寸的显示器上，它似乎工作正常。 但是，在较小的笔记本电脑屏幕上，Windows用户界面缩放到125%，它将开始扭曲。