Question

我设计了一个HTML输入类型=范围元素，它在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;
}

它是目前所有事物的一个方面：http://jsfiddle.net/agentemi1y/srp7r3ue/1/

Answer 1

对于这种webkit渲染故障，我很幸运地强迫了浏览器在this answer中引用重绘。即：

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

Fiddle修复。

Safari中的HTML5范围元素渲染严重

1 个答案: