HTML5 范围元素在 Safari 中的渲染很糟糕

Question

我设置了一个 HTML input type=range 元素的样式，它在 Chrome 中的工作方式符合我的要求，但在 Safari 中呈现得非常糟糕。移动时，轨迹球不显示或部分渲染。加载似乎也需要很长时间。有谁知道这里发生了什么？

轨迹和球上的 CSS 样式（减去媒体查询中的微小变化：

input[type=range] {
    -webkit-appearance:none;
    -webkit-flex-basis:100%;
}

input[type=range]::-webkit-slider-runnable-track {
    width:10rem;
    height: 1rem;
    background: #fff;
    border: 2px solid orange;
    border-radius: 10px;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 3rem;
    width: 3rem;
    border-radius: 50%;
    background: orange;
    margin-top: -1.2rem;
    border:2px solid #fff;
    cursor: pointer;
}

input[type=range]:focus {
    outline: none;
}

现在是整个事情的 jsfiddle：http://jsfiddle.net/agentemi1y/srp7r3ue/1/

Answer 1

对于这种 webkit 渲染故障，我有幸强制浏览器 按照this answer 中的引用重绘。也就是说：

$slider.hide().show(0);

Fiddle 已修复。