iOS Safari 字体上的这些奇怪的矢量线是什么？查看屏幕截图和片段

Question

在 iOS Safari 中的移动网站上做一些工作时，我放大并注意到一些文本上有这些奇怪的矢量线。这是在 iOS 16.6.1 上。这是我正在使用的 CSS 字体堆栈：

font-family: 'Segoe UI', 'Lucida Grande', -apple-system, BlinkMacSystemFont, 'Liberation Sans', sans-serif

我该如何摆脱这个问题？不会出现在其他任何地方（在 FireFox 和 Chrome 上看起来很正常）。

<style>
button{
background-color:#1b75d0;
color:#ffffff;
font-size:18px;
border-width:0;
padding:5px;
margin:0;
paint-order: fill markers stroke;
font-family: 'Segoe UI', 'Lucida Grande', -apple-system, BlinkMacSystemFont, 'Liberation Sans', sans-serif;
}
</style>

<button>Click Me</button>

Answer 1

将CSS属性

paint-order

设置为

normal

后，奇怪的线条消失了。