iOS手机重复背景图出现线条问题的解决方法咨询

问题场景 #

使用以下CSS设置背景图时，iOS设备上出现了异常的横向线条：

background-size: 100%;
background-repeat: repeat-y;

实际显示效果：

可行解决方案 #

• 微调背景尺寸规避渲染间隙：给背景宽度增加1px，抵消iOS缩放时的像素截断问题：

  background-size: calc(100% + 1px) auto;
  background-repeat: repeat-y;
  

• 替换百分比尺寸为cover/contain：如果布局允许，改用内置的背景尺寸关键字，避免百分比缩放的精度问题：

  background-size: cover;
  background-repeat: repeat-y;
  

• 预处理背景图：将背景图的上下边缘做1px的像素重叠，或者确保图片高度是容器高度的整数倍，从根源避免拼接时的间隙。

• 用伪元素模拟纵向重复：放弃原生repeat-y，通过绝对定位的伪元素生成足够高度的背景，避免iOS渲染bug：

  .target-element {
    position: relative;
    overflow: hidden;
  }
  .target-element::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1000%;
    background-image: url("你的背景图地址");
    background-size: 100% auto;
    transform: scaleY(0.1);
    transform-origin: top left;
    z-index: -1;
  }
  

• 触发硬件加速修复渲染：给目标元素添加3D变换，强制启用硬件加速，解决渲染层面的间隙问题：

  .target-element {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  

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