css - Safari 在使用border-radius 时呈现奇怪的线条

Question

使用边框半径和边框时，我遇到了一个奇怪的 safari 渲染问题。

HTML 是

<div id="box"></div>

CSS：

body {
    background-color: #666;
}

#box {
    width: 700px;
    height: 300px;

    background-color: white;
    
    border-radius: 8px;
    border-top: 8px solid green;
}

圆形边框渲染得很好，但 safari 在圆角内侧添加了一些奇怪的虚线对角线。

这是带有缩放的屏幕截图：

这是一个演示：https ://jsfiddle.net/mgfz0tsd/1/

我认为这是 Safari 中的渲染错误，因为在其他浏览器中不会发生这种情况。有什么解决方法吗？

编辑：它似乎与屏幕分辨率有关，只发生在 4k 或其他大分辨率上。

标签： csssafari