我在网站上使用可平铺的背景图像。该网站在所有桌面浏览器中的浏览效果都很好,但当我在 iPad Mini(运行 iOS 6.1.3)上查看该网站时,背景图像中有条纹。您可以在大多数页面上看到一种模式,即一条看起来不错的线(背景图像的大小),然后另一条线又与背景图像的大小相同,等等。
这是显示问题的屏幕截图:
这是背景所需的 CSS:
#wrap {
margin:0 auto;
position:relative;
padding:0;
background: #B3B1B2 url(/images/bgs/parchment2.jpg);
}
我尝试清除 iPad 的缓存,但没有成功。我不知道为什么会发生这种情况。我该如何预防和解决这个问题?
Update
我创建了一个jsFiddle包装纸的。网站上看起来还不错。所以我只能假设它在我的代码中的某个地方。然而,这并不总是立即在网站上发生。小提琴可能会发生这种情况,但我还没有看到它发生。如果是我的网站,我如何跟踪导致问题的代码?
Update 2
我将背景图片更改为html, body
标签,问题仍然发生,但没有那么严重,并且会自行清除。我仍然想知道如何一起防止这个问题。
Update 3
我尝试了@Riskbreaker 的切换到 PNG 的想法。这不起作用。我仍然看到线条。它还大幅增加了背景文件(从 30k 增加到近 200k)。我还尝试了完全不同的背景图像,认为它可能是图像本身,但我仍然看到了错误。出于文件大小的考虑,我切换回 jpg。
我该如何解决这个问题?这是 iOS 问题还是我的代码中的问题?
有问题的网站是http://www.lfrieling.com/。我只在运行 iOS 6.1.3(撰写本文时最新)的 iPad Mini 上看到这一点。我在运行相同版本 iOS 的 iPhone 上没有看到这一点。此外,您在长页面上比其他页面更容易看到这一点。请参阅专业 > 资源。
您尝试过硬件加速吗?添加-webkit-transform: translateZ(0);
与添加背景相同的CSS。这是我的猜测,因为这似乎是一个渲染问题,并且当您在 Chrome 中使用 css 过渡时,硬件加速修复了渲染问题。
#wrap {
margin:0 auto;
position:relative;
padding:0;
background: #B3B1B2 url(/images/bgs/parchment2.jpg);
-webkit-transform: translateZ(0);
}
或者尝试使用媒体查询支持支持视网膜显示图像的设备?
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
#wrap {
background: #B3B1B2 url(/images/bgs/parchment2_2x.jpg);
}
}
媒体查询来源 *
要解决渲染问题,您可以尝试添加-webkit-transform: translateZ(0);
到也在页面上包装内容的其他标签。这可以防止加载/渲染问题。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)