Safari 浏览器缩放 + 线性渐变问题

Question

我用的是

linear-gradient(90deg, transparent 0 47px,  #000 47px 48px); 
background-size(48px);

在背景上绘制 1px 的垂直线。 它在任何地方都可以正常工作，在 Safari 中也是如此，除非 Safari 浏览器被放大。

这里是演示：https://jsfiddle.net/kasheftin/7s1af36g/2/

.container {
  background: linear-gradient(90deg, transparent 0 47px,  #000 47px 48px);
  background-size: 48px;
  width: 300px;
  height: 100px;
  border: 1px solid #000;
}

<div class="container">

</div>

这就是它在 110% 缩放的 safari venture 16.3 中的样子：

此外，当浏览器缩小时，线条会完全消失。

这个问题有什么解决方法吗？

Answer 1

我不完全确定为什么 Safari 的行为不同，但是从

49px

到

100%

的渐变（覆盖垂直线后的像素）添加一个额外的透明步骤似乎解决了缩放时 Safari 中的问题。

.container {
  background: linear-gradient(90deg, transparent 0 47px, #000 47px 48px, transparent 49px 100%);
  background-size: 48px;
  width: 300px;
  height: 100px;
  border: 1px solid #000;
}

<div class="container"></div>