我正在开发一个响应式设计,类“bgMainpage”有一个背景图像,但它并没有显示在所有的设备上的Safari.我已经应用了背景大小的封面,就像客户想要的那样.我也添加了浏览器特定的CSS,我不知道还有什么要做,这也出现在Safari中. Chrome,FF,IE显示图像很好.有任何想法吗 ？
CSS：
.bgMainpage{
background:url("../images/bg.jpg") no-repeat scroll right top #000000;
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size:cover;
background-size: cover;
}
解决方法
Safari有一个明显的错误,如果符合某些条件,它将不会显示某些类型的某些类型的jpg / JPEG图像.对于在线使用,有一种称为渐进JPEG的jpg图像.定期的jpg图像将图像数据从上到下编码,您可以在线查看它们.另一方面,进步JPEG对逐渐更高细节的图像进行编码.这意味着它首先加载模糊,然后变得更清晰.有些人认为这看起来更好的在线,这就是为什么它被使用.一些图像优化器将自动使jpg逐渐进行在线使用.
根据我的经验,当满足以下某些条件时,Safari将不会显示jpgs：
>使用逐行编码
>图像是背景(用于元素或整个页面)
>图像很大(我不知道有多大,但我遇到了几千像素宽的图像的问题)
>可能还有其他的事情,我还没有充分探讨这个bug
我没有能够在除Safari之外的任何浏览器中重新创建.
要解决这个问题,您可以重新保存图像,确保它不是渐进的格式(photoshop等为此选择),或使用其他格式(gif,png等)
