如何在iOS上复制背景附着的固定效果

Question

我正在为学校项目尝试使固定背景图像的div在iOS上正常工作。我一直在使用

background-attachment: fixed;

但这导致移动版Safari中出现奇怪的尺寸和没有滚动效果。 这是我正在处理的网站；我目前使用的报价div图像背景方法在桌面上运行良好，但在iOS上完全失败了。

不知何故，http://www.everyonedeservesgreatdesign.com能够使此功能正常工作。我很难跟进代码，因为他们使用的是某种squarespace模板，但看起来他们将图像放入了一个position:fixed div中，该div被其position:relative父div剪裁了。我曾经认为，除了视口以外的任何东西都无法剪裁position:fixed divs，因此我非常好奇这里发生了什么。

有什么方法可以在我的网站上实现此固定图像div背景的方法吗？

- QRohlf

---

嘿，这与您的问题无关，但底部的链接会在移动设备上破坏您的布局。尝试将body和邮件div的overflow-x隐藏起来，以便它不会水平滚动。 - fernandopasik

这被标记为重复，但没有找到重复的问题，而这个问题得到了最多的赞。唉。 - vhs

Answer 1

过去曾经有人提出过这个问题，很明显移动浏览器的成本很高，因此它被禁用了。

请查看@PaulIrish的评论：

固定背景具有巨大的重绘成本和严重影响滚动性能，我认为这就是为什么它被禁用的原因。

您可以在以下帖子中看到解决方法： iOS 7上的固定背景图像 iOS7上固定的页面背景随页面滚动

- fernandopasik

---

我对http://www.everyonedeservesgreatdesign.com/使用的特定技术很好奇，它似乎独特之处在于它使用具有position:fixed属性的图像，而不是基于JavaScript的解决方法。 - QRohlf

这不仅仅是css问题，看一下#parallax-images div，image-container具有内联css。这是在https://static.squarespace.com/static/ta/515c7b5ae4b0875140c3d94a/2476/scripts/site.js处理的。 - fernandopasik

啊，谢谢。我真的很想知道他们是如何在没有js的情况下实现这种效果的；看起来答案是他们没有。 - QRohlf

很有趣。我不知道五年前是否如此，但在安卓上，这个功能不仅没有被禁用，而且在使用固定背景的情况下，与不使用时只有1%的帧率差异。iOS应该取消这个限制… - Nick Bilyk

该评论并非一个明确的结论，而更像是一种假设。我们需要更多的数据来确保这一点。 - Mariano J. Ponce

Answer 2

在我看来，背景图像实际上不是背景图像...该网站将背景图像和引用放在兄弟div中，其中包含图像的div的子元素被分配了position: fixed; 引用div也被赋予了透明背景。

wrapper div{
   image wrapper div{
       div for individual image{ <--- Fixed position
          image <--- relative position
       }
   }
   quote wrapper div{
       div for individual quote{
          quote
       }
   }
 }

- unconditional_loading