jquery - 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修复。