将Chrome更新至版本-49后HT​​ML 5输入范围缩略图消失

Question

我在我的一个客户端网站中使用伪类:after和:before并使用-webkit-前缀为主题的HTML5输入范围缩略图。直到我将我的Chrome浏览器（桌面，Windows 7）更新至版本49.0.2623.87 m后，它才正常显示。

任何人都可以请建议，这里发生了什么变化？

谢谢！

---

下面是我用Chrome浏览器中的CSS：

input.thickness { 
 
    -webkit-appearance: none; 
 
    float: left; 
 
    width: 72%; 
 
    margin-right: 20px; 
 
    margin-top: 8px; 
 
    margin-left: 0 /*for firefox*/; 
 
    padding: 0 /*for IE*/; 
 
} 
 
input.thickness:focus::-webkit-slider-runnable-track { 
 
    outline: none; 
 
} 
 
input.thickness::-webkit-slider-runnable-track { 
 
    width: 100%; 
 
    height: 8px; 
 
    background-color: #2f9de2; 
 
    border-radius: 4px; 
 
} 
 
input.thickness::-webkit-slider-thumb { 
 
    -webkit-appearance: none; 
 
    position: relative; 
 
    background: transparent; 
 
    width: 22px; 
 
    height: 12px; 
 
    margin-top: 8px; 
 
} 
 
input.thickness::-webkit-slider-thumb:after, 
 
input.thickness::-webkit-slider-thumb:before { 
 
    bottom: 0; 
 
    left: 0; 
 
    border: solid transparent; 
 
    content: " "; 
 
    height: 0; 
 
    width: 0; 
 
    position: absolute; 
 
    pointer-events: none; 
 
} 
 
input.thickness::-webkit-slider-thumb:after { 
 
    border-color: rgba(136, 183, 213, 0); 
 
    border-bottom-color: #2f9de2; 
 
    border-width: 10px; 
 
} 
 
input.thickness::-webkit-slider-thumb:before { 
 
    border-color: rgba(194, 225, 245, 0); 
 
    border-bottom-color: #2f9de2; 
 
    border-width: 10px; 
 
}

<input class="thickness" type="range" min="0" max="100" value="50" />

Answer 1

这是intentional。 It's also on par with Gecko's behaviour。