在 Chromium 中具有边框半径的表单元素上奇怪的箱形阴影伪影-解网

问：

我正在尝试自定义某些表单元素的样式。在其他修改中，他们得到了一个周围。在 Chromium/Linux Mint 中，这会导致盒子侧面出现一个奇怪的伪影。我找不到任何管理此属性或它附加到的特定于浏览器的伪元素/影子 DOM 元素。我所能看到的是，如果我设置为 0，或者删除，或者如果我将框影的模糊半径设置为 0，它就会消失。此外，如果没有文本内容，它会在元素处消失。box-shadowborder-radiusbox-shadow<output>

这是Firefox中的预期外观：

这就是我在 Chromium 中看到的：

body {
  height: 100vh;
  margin: 0;
  background: lightblue;
  display: flex;
  align-items: center;
  padding: 30px;
}

form {
  width: 100%;
  padding: 30px;
  display: flex;
  align-items: stretch;
  
}

input, output {
  -webkit-appearance: none;
  box-sizing: content-box;
  margin: 0;
  padding: 12px;
  background: rgba(255,255,255,0.2);
  border-radius: 10px;
  border: none;
  box-shadow: 2px 2px 3px 1px rgba(0,0,0,0.2), -2px -2px 3px 1px rgba(255, 255, 255, 0.6);
}

input[type=range] {
  width: 100%;
  cursor: pointer;
}

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

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  position:relative;
  top:-18px;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  background: #ffbf00;
  border: none;
  border-radius: 50%;
}

input[type=range]::-moz-range-thumb {
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  background: #ffbf00;
  border: none;
  border-radius: 50%;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8px;
  background: #2c5aa074;
  border-radius: 4px;
  margin: 0 22px;
}

input[type=range]::-moz-range-track {
  width: calc(100% - 36px);
  left: 18px;
  height: 8px;
  background: #2c5aa074;
  border-radius: 4px;
}

output {
  width: 3em;
  margin-left: 30px;
  font-family: sans-serif;
  font-size: 30px;
  color: #2c5aa0;
  text-align: center;
}

<form>
<input type="range" id="value" min="-10" max="10" step="1">
<output for="value">0</output>
</form>

我发现了一个看起来相关的问题，但似乎只涉及嵌入阴影，并且建议的解决方法失败了。有谁知道如何解决这个问题？

CSS 形成 Chromium

在 Chromium 中具有边框半径的表单元素上奇怪的箱形阴影伪影

Strange box-shadow artefacts on form elements with border-radius in Chromium

评论