背景图像在iOS中无法正确显示

概述我正在网站上使用可拼图的背景图片.该网站在所有桌面浏览器中都可以很好地查看,但当我在iPad Mini(运行iOS 6.1.3)上查看该网站时,背景图像中有条纹.你可以看到大多数页面上的图案是一条线(背景图像的大小)看起来很好,然后另一条线又与背景图像的大小相同,等等. 以下是显示问题的屏幕截图： 这是后台所需的CSS： #wrap { margin:0 auto; positi 我正在网站上使用可拼图的背景图片.该网站在所有桌面浏览器中都可以很好地查看,但当我在iPad Mini(运行iOS 6.1.3)上查看该网站时,背景图像中有条纹.你可以看到大多数页面上的图案是一条线(背景图像的大小)看起来很好,然后另一条线又与背景图像的大小相同,等等.

以下是显示问题的屏幕截图：

这是后台所需的CSS：

#wrap {     margin:0 auto;    position:relative;    padding:0;    background: #B3B1B2 url(/images/bgs/parchment2.jpg); }

我尝试清除iPad的缓存但是没有用.我不知道为什么会发生这种情况.如何预防和解决此问题？

更新

我创建了一个jsFiddle的包装器.它在网站上看起来没问题.所以我只能假设它在我的代码中的某个地方.但是,这并不总是立即发生在网站上.这可能发生在小提琴,但我还没有看到它发生.如果是我的网站,如何跟踪导致问题的代码？

更新2

我将背景图像更改为HTML,bodyTags并且问题仍然发生但是并没有那么糟糕并且会自我清除.我仍然想知道如何一起防止这个问题.

更新3

我尝试了@ Riskbreaker关于切换到PNG的想法.这没用.我仍然看到线条.它还大幅增加了背景文件(从30k增加到近200k).我也尝试了一个完全不同的背景图像,认为它可能是图像本身,但我仍然看到了错误.我考虑到文件大小,切换回jpg.

我该如何解决这个问题？这是iOS问题还是代码中的问题？

有问题的网站是http://www.lfrieling.com/.我只在运行iOS 6.1.3的iPad Mini上看到这个(截至本文撰写时的最新版本).我在iPhone上运行相同版本的iOS时没有看到这个.你也可以在长页面上看到比其他页面更多的内容.见专业>资源.

解决方法 你尝试过硬件加速吗？添加-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);  }}

Media Query source *

要解决渲染问题,可以尝试添加-webkit-transform：translateZ(0);到其他标签也包含在页面上的内容.这可能会阻止加载/渲染问题.

总结

以上是内存溢出为你收集整理的背景图像在iOS中无法正确显示全部内容，希望文章能够帮你解决背景图像在iOS中无法正确显示所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。