Safari浏览器缩放时linear-gradient背景线条异常问题求助

我用以下CSS在背景绘制1px垂直线，正常状态下所有浏览器（包括Safari）都能正常工作，但Safari缩放时会出现异常：

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

完整代码示例 #

CSS

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

HTML

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

Safari缩放时的异常表现 #

• 放大至110%时，线条变粗：
  
• 缩小浏览器时，线条完全消失：
  

可行的修复方案 #

方案1：改用重复线性渐变（repeating-linear-gradient）

使用repeating-linear-gradient替代普通线性渐变，无需单独设置background-size，其重复渲染逻辑在Safari缩放时更稳定：

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

方案2：添加Safari专属渲染优化属性

给容器添加image-rendering: -webkit-optimize-contrast，强制Safari优化图像渲染精度，缓解缩放时的线条变形问题：

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

方案3：用CSS Grid实现垂直线

CSS Grid的布局逻辑在缩放时稳定性更高，通过网格列和伪元素实现1px垂直线：

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, 48px);
  width: 300px;
  height: 100px;
  border: 1px solid #000;
  overflow: hidden;
}
.container::after {
  content: "";
  grid-column: 1 / -1;
  height: 100%;
  box-shadow: 47px 0 0 #000, 95px 0 0 #000, 143px 0 0 #000, 191px 0 0 #000, 239px 0 0 #000, 287px 0 0 #000;
}

内容的提问来源于stack exchange，提问作者Kasheftin