CSS sprite 在 Chrome 移动设备上不起作用

【问题标题】：CSS sprite not working on Chrome mobileCSS sprite 在 Chrome 移动设备上不起作用
【发布时间】：2016-12-22 20:29:07
【问题描述】：

HTML：

<span class="activity-2">&nbsp;</span>

CSS：

.activity-2 {
    background-position: 0 -80px;
    border: 1px solid #e4e4e4;
    border-radius: 2px;
    background-image: url(https://i.imgur.com/E5Jr2Tv.png);
    display: block;
    height: 40px;
    text-indent: -1000em;
    width: 40px;
    float: left;
}

小提琴：https://jsfiddle.net/7mqkofuq/

背景图片在我测试过的所有桌面/移动浏览器上都能正确显示，除了 Chrome 移动浏览器。为什么？？

【问题讨论】：

标签： css google-chrome background-image css-sprites

【解决方案1】：

尝试将 preserveAspectRatio="none" 添加到您的课程中

【讨论】：

仅适用于 SVG？
我的错误是我误读并认为您使用了 .svg，您的问题很可能是您的图像大小为 40*4760。即使您只显示图像的一小部分，移动浏览器也无法处理那么大的图像
有兴趣知道。我尝试通过直接输入网址来打开图像，它可以工作。背景图片的大小有限制吗？
我认为图片在手机上会出现问题，因为加载它们需要时间。所以你可以尝试使用像 tinypng.com 这样的网站，它们会从 .ong 文件中删除不需要的信息