是否有解决 Safari 错误的解决方法，它通过使用具有复杂边界半径的边界底部来构建人工制品

Question

我尝试创建一个手写的下划线来输入。

有了这个复杂的边界半径，Chrome 看起来很棒。然而，在 Safari 中，这些伪像出现了。

我尝试用

修复它

-webkit-background-clip: padding-box;

input {
  border: none;
  border-bottom: 2px solid;
  border-radius: 130px 50px/4px 2px;
}

Safari：输入的人工制品

Answer 1

Safari 似乎有一些有趣决定边框颜色。尝试放大这个，例如：

input {
  border: 0.001px solid white;
  border-bottom: 2px solid red;
  border-radius: 130px 50px/4px 2px;
  padding: 10px;
  width: 300px;
}

我猜链接的变通方法不起作用，因为边框不在元素内部？

但这没关系 (codepen):

input {
  border: 1px solid transparent;
  border-bottom: 2px solid red;
  border-radius: 130px 50px/4px 2px;
  padding: 10px;
  width: 300px;
}

<input>

我的其他考虑是使用 SVG 元素作为背景 and/or 使用 border-image-slice 来模拟行为。

is there a Workaround for fixing a Safari bug, that builts artefacts by using border-bottom with complex border-radius