如何复制在iOS上固定的背景附件 [英] How to replicate background-attachment fixed on iOS

问题描述

我想获得固定背景图像的div在iOS上为学校项目工作。我一直在使用


background-attachment：fixed;


但是这导致移动safari中的奇怪的大小和滚动效果。 这是我正在使用的网站;我目前用于quote div图像背景的方法在桌面上运行良好，但在iOS上完全失败。

不知怎的， http://www.everyonedeservesgreatdesign.com 得到这个工作。我无法跟踪代码，因为他们使用某种类型的正方形模板，但它看起来像他们把图像放入一个 position：fixed div不知何故被它的位置：相对父div。我的印象是，不可能夹除位置：固定除了视口之外的任何东西，所以我很好奇这里发生了什么。

有关如何在我的网站中为固定图片div背景实施此方法的任何想法？

解决方案

$ p
$ b

检查 https://twitter.com/paul_irish/status/306818591196602368\">此评论@PaulIrish ：

固定背景

您可以在此帖子中查看此问题的解决方法：

使用ios7修复背景图片

固定背景与iOS7上的页面滚动

I'm trying to get fixed-background-image divs working on iOS for a school project. I've been using

background-attachment: fixed;

But this is leading to weird sizing and no scrolling effects in mobile safari. Here is the site that I'm working with; the method I'm currently using for the quote div image backgrounds works well on desktops but fails completely on iOS.

Somehow, http://www.everyonedeservesgreatdesign.com got this working. I'm having difficulty following the code because they're using a squarespace template of some kind, but it looks like they're putting images into a position:fixed div that is somehow being clipped by its position:relative parent div. I was under the impression that it wasn't possible to clip position:fixed divs with anything other than the viewport, so I'm very curious as to what's going on here.

Any ideas on how to implement this method for fixed image div backgrounds in my site?

解决方案

It has been asked in the past, apparently it costs a lot to mobile browsers, so it's been disabled.

Check this comment by @PaulIrish:

Fixed-backgrounds have huge repaint cost and decimate scrolling performance, which is, I believe, why it was disabled.

you can see workarounds to this in this posts:

Fixed background image with ios7

Fixed body background scrolls with the page on iOS7

这篇关于如何复制在iOS上固定的背景附件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！