Chrome 移动浏览器背景位置图像错误？

Question

我使用 .polooid 类设置了多个 div，以在“照片”样式边框中显示，该边框使用单个精灵背景图像（由许多 100x100px 图像的网格组成）。

.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;    
}

CSS 规则定位背景图像。

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

它可以在所有浏览器（包括笔记本电脑上的 Chrome）上完美运行，但 Android 上的 Google Chrome 除外。有几张图片相差约 5 像素左右。奇怪的是，许多位置正确，但有些位置不正确。

在Chrome手机屏幕截图中，您可以看到泳池和皮划艇的图像是正确的，女人和男人的照片位置不正确。

要查看“正确”的网站，请访问以下 URL（滚动到页面底部）：https://www.taupoaccommodation.co/index.php

非常感谢任何想法或帮助！

似乎适用于除运行版本 124.0.6367.113（Android 手机）的 Google Chrome 之外的所有浏览器

Answer 1

终于找到了解决方案，仍然不知道为什么 Chrome（移动设备会这样做）但是将精灵背景大小从 cover 更改为 % 有效

.polaroid {
background:url("../images/sprite.jpg") no-repeat;color:transparent; 
background-size: 4300% 100%;/*grid is 43 images in a single row  images @200px grid fixed Chrome issue with offset bg images from sprite*/
width:100px;
height:100px;

}

...解决了问题。顺便说一句，我在大小为 100px x 100px 的“宝丽来”风格 div 中使用每个 200x200px 的图像，以实现良好的视网膜质量显示。希望这对其他人有帮助。

格雷格