<meter> 在 Chrome 中无法正常工作

Question

我正在关注有关创建密码强度计的这篇文章。这在 Firefox 中工作正常，但它不会在 Chrome 浏览器中切换颜色。我也尝试了随附的代码笔演示，但它似乎也不适用于 Chrome 浏览器。以下是仪表元素的 CSS 样式：

meter {
    /* Reset the default appearance */
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;

    margin: 0 auto 1em;
    width: 100%;
    height: .5em;

    /* Applicable only to Firefox */
    background: none;
    background-color: rgba(0,0,0,0.1);
}

meter::-webkit-meter-bar {
    background: none;
    background-color: rgba(0,0,0,0.1);
}

meter[value="1"]::-webkit-meter-optimum-value { background: red; }
meter[value="2"]::-webkit-meter-optimum-value { background: yellow; }
meter[value="3"]::-webkit-meter-optimum-value { background: orange; }
meter[value="4"]::-webkit-meter-optimum-value { background: green; }

meter[value="1"]::-moz-meter-bar { background: red; }
meter[value="2"]::-moz-meter-bar { background: yellow; }
meter[value="3"]::-moz-meter-bar { background: orange; }
meter[value="4"]::-moz-meter-bar { background: green; }

请建议 Chrome 中可能会发生哪些变化导致这种行为？我试图寻找供应商前缀的任何变化，但找不到任何变化。

Answer 1

版本 52 的 Chrome 中存在一个错误，导致-webkit-appearance:none;仪表元素消除了彩色条本身。

https://bugs.chromium.org/p/chromium/issues/detail?id=602928

-webkit-appearance从仪表中删除属性会导致显示彩色条。请参阅下面的小提琴示例：

https://jsfiddle.net/t58fnan9/1/

编辑：上面的问题链接显示问题已修复。不过这里已经重新打开了：https : //bugs.chromium.org/p/chromium/issues/detail?id=632510