背景附件：已修复，无法在iPad上使用 [英] background-attachment:fixed isn't working on iPad

问题描述

是否有CSS / Modernizr方式，以了解浏览器是否支持background-attachment：fixed？

Is there a CSS/Modernizr way, to know if the browser support background-attachment:fixed ?

我正在使用background-size&

I'm using background-size & background-attachment together

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

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

And if it doesn't support, it still have an impact on the background-size, and I wants to prevent it.

我更喜欢Modernizr方法（如新测试）。

I prefer a Modernizr way(like a new test).

您可以看到在此处发布2个大的视差图像（向下滚动）-具有以下类的css类：

parallax image-1， parallax image-2。

You can see to issue here the 2 big "parallax" images(scroll down) - with the css class of:
"parallax image-1", "parallax image-2".

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

推荐答案

最近我也一直在努力解决这个问题。我的设计中有视差条纹，iOS用户报告这些a）中的背景图像严重失真，b）不是视差。我不拥有iOS设备，因此我不得不与他人合作进行调试，但是iOS似乎有意禁用了视差效果等滚动更新，并且这种情况发生在Chrome和Safari中。

I have been banging my head against this issue recently also. I have parallax strips in a design and iOS users were reporting that the background images in these a) were horribly distorted, and b) were not parallax. I don't own an iOS device, so I had to work through others to debug this, but it appears that iOS purposefully disables on-scroll updates like parallax effects, and this happens in Chrome as well as Safari.

我无法找到使视差背景在iOS上正常工作的方法（尽管我注意到有些SquareSpace和其他网站已通过将它们交换为缩放的嵌入式图像而达到了这种效果，这比我愿意尝试应该可以起作用的东西更加复杂和耗时）。因此，我决定通过重置背景附件值以仅在iOS上滚动这些元素，来简单地禁用iOS的视差效果。由于Modernizr会检测功能而不是浏览器，因此我不得不使用此脚本来检测所有iOS设备，然后设置CSS样式以覆盖固定值：

I was unable to find a way to get parallax backgrounds to work on iOS (although I notice that there are some SquareSpace and other sites that have achieved the effect by swapping them for scaled inline images, which was more complex and time-consuming than I was willing to attempt for something that should just work). So instead I decided to simply disable the parallax effect for iOS by resetting the background-attachment value to scroll for these elements on iOS only. Since Modernizr detects features and not browsers, I had to use this script to detect all iOS devices and then set a CSS style to override the fixed value:

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

然后我的CSS是：

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

这并不理想（这是与设备有关的hack，会降低体验） ，但考虑到苹果对iOS上的视差有敌意（据说是因为它会影响性能），我认为我可以接受。

It's not ideal (it's a device-dependent hack and it downgrades the experience), but given Apple's hostility to parallax on iOS (supposedly because it affects performance), I think I can live with it.

希望对别人有帮助。

这篇关于背景附件：已修复，无法在iPad上使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！