Question

是否有CSS / Modernizr方式，以了解浏览器是否支持后台附件：修复？

我正在使用背景尺寸＆amp;背景附件一起

background-size:cover;
background-attachment:fixed;

如果它不支持，它仍会对背景大小产生影响，我想阻止它。

我更喜欢Modernizr方式（就像新测试一样）。

你可以在这里看到2个大“视差”图像（向下滚动） - 与css类： “视差图像-1”，“视差图像-2”。

http://royalchef-yes.walla.co.il/

Answer 1

我最近也一直在反对这个问题。我在设计中有视差条，iOS用户报告说这些a）中的背景图像是可怕的扭曲，而b）不是视差。我不拥有iOS设备，所以我必须通过其他人来调试这个，但似乎iOS有目的地禁用滚动更新，如视差效果，这种情况发生在Chrome和Safari中。

我无法找到一种方法让视差背景在iOS上工作（虽然我注意到有一些SquareSpace和其他网站通过将它们换成缩放的内嵌图像来实现这种效果，这更加复杂和时间 - 消耗比我愿意尝试的东西应该只是工作）。因此，我决定通过重置背景附件值来仅禁用iOS上的这些元素来禁用iOS的视差效果。由于Modernizr检测到功能而不是浏览器，我不得不使用此脚本来检测所有iOS设备，然后设置CSS样式以覆盖固定值：

https://gist.github.com/jsoverson/4963116

然后我的CSS是：

.device-ios .parallax-strip {
    background-attachment:scroll !important;
}

它并不理想（它是依赖于设备的黑客，它降低了体验），但考虑到Apple对iOS上的视差的敌意（据说是因为它会影响性能），我想我可以忍受它。

希望能帮助别人。

Answer 2

我在另一个问题中找到了一个答案，所以我不确定它是否有效但尝试不会有害：）

#background_wrap {
z-index: -1;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-size: 100%;
background-image: url('xx.jpg');
background-attachment: fixed;}

并投入

<body><div id="background_wrap"></div></body>

来源：Using background-attachment:fixed in safari on the ipad

Answer 3

iOS 13不支持item.displayValue(item.value)属性，您需要一个后备功能来克服此问题。后备功能需要检查设备是iPhone还是iPad。

background-attachment: fixed

background-attachment：fixed不能在iPad上运行

3 个答案: