iPhone Safari浏览器中图片重复显示问题求助

问题概述 #

电脑端测试时图片显示正常，但在iPhone Safari浏览器中出现图片重复显示的情况，尝试将object-fit: contain改为scale-down后无效。

可能原因与解决方案 #

以下是针对该问题的几种排查和修复思路，按优先级尝试：

1. 移除img的110%高度设置，改用约束性属性 #

移动端CSS中设置height: 110%可能导致图片超出父容器，在Safari中触发异常渲染。修改为：

@media screen and (max-width:751px) {
  #banner .image img{
    max-height: 100%;
    width: 100%;
    object-fit: contain;
    object-position: center;
  }
}

2. 给图片父容器添加明确的高度约束 #

父元素.image仅设置了宽度，未定义高度，导致Safari无法正确计算图片尺寸。添加高度限制：

@media screen and (max-width:751px) {
  #banner .image {
    height: auto;
    max-height: 350px; /* 根据需求调整数值 */
  }
  #banner .image img{
    height: 100%;
    width: 100%;
    object-fit: contain;
  }
}

3. 排查.object类的额外样式 #

HTML中图片的父元素带有.object类，如果该类被设置了background-image且background-repeat: repeat，会和img标签叠加造成重复显示。添加覆盖样式：

#banner .image.object {
  background: none;
  background-repeat: no-repeat;
}

4. 修复Safari的flex布局兼容性问题 #

在移动端将banner的flex方向改为垂直排列，避免Safari对横向flex的渲染bug：

@media screen and (max-width:751px) {
  #banner {
    flex-direction: column;
  }
  #banner .content, #banner .image {
    width: 100%;
    margin: 0 0 2em 0; /* 重置margin，避免横向间距 */
  }
  #banner .image img{
    height: auto;
    width: 100%;
    object-fit: contain;
  }
}

5. 添加Safari专属渲染优化 #

针对Safari的渲染bug，添加backface-visibility属性避免重复渲染：

#banner .image img {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

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