安卓版Chrome浏览器background-position背景图定位异常求助

问题场景 #

我通过带.polaroid类的div实现拍立得样式，采用一张由多个100x100px子图组成的精灵图作为背景，核心CSS如下：

.polaroid {
  background:url("../images/sprite.jpg") no-repeat;color:transparent;
  margin:10px 15px 5px 0;
  outline: 5px solid #EBEBEB;
  width:100px;
  height:100px;
  background-size: cover;
  display: block;
  float:left;
  -webkit-transition: all .15s linear;
  -moz-transition: all .15s linear;
  transition: all .15s linear;    
}

通过额外类指定背景定位：

.pool{background-position:-300px 0px;}
.kayaks{background-position:-400px 0px;}
.woman{background-position:-3400px 0px;}
.man{background-position:-3500px 0px;}

该效果在桌面Chrome及多数浏览器中正常，但安卓Chrome 124.0.6367.113中，部分子图（如.woman、.man）出现约5px的偏移，.pool、.kayaks则显示正常。

解决思路 #

• 替换background-size: cover为精确像素值
  cover会根据容器比例缩放背景图，当精灵图总尺寸较大时，移动端浏览器的缩放计算易出现精度误差。将background-size设置为精灵图的实际宽高（假设精灵图为3600px×100px）：

  .polaroid {
    background-size: 3600px 100px;
  }
  

  强制背景图按原始尺寸渲染，避免缩放导致的定位偏移。

• 用百分比替代像素值做背景定位
  大像素值的定位在移动端可能触发整数像素对齐问题。将像素偏移转换为百分比（以总宽度3600px为例）：

  .woman{background-position: -94.444% 0;}
  .man{background-position: -97.222% 0;}
  

  百分比定位让浏览器按比例计算位置，减少大像素值带来的精度偏差。

• 添加image-rendering强制像素对齐
  在.polaroid类中加入以下属性，强制浏览器按原始像素渲染图片，避免模糊或偏移：

  .polaroid {
    image-rendering: -webkit-crisp-edges;
    image-rendering: crisp-edges;
  }
  

• 验证精灵图尺寸精度
  确保精灵图的实际宽高为整数，且每个子图严格为100x100px。若精灵图本身存在小数尺寸，移动端渲染时易出现偏移，需重新导出精灵图保证尺寸精确。

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