does a background-attachment of fixed work in iOS5?

Question

Does this work in > iOS 5?

.element {
    background: url(images/myImage.jpg) 50% 0 no-repeat fixed;
}

I thought that it should, but so far

Answer 1

There are too many issues with the fixed position on mobile and touch devices.

As long the background is not animated in any way(blur, css transistions any JS) AND as long there is no scrollbar, then it is usable and consistent.

Everything else will-depending on browser- result in undesired results, image pixelation, images scaling 100 fold on IOS devices, "jumping" divs etc.

The best work around method i have found so far, say, if you want to reproduce a fixed BG scroll page, is to use the parallax method, having one div as scrolling, the next with background transparent, rinse repeat.

It looks good enough I think, and no plugins are needed.

Answer 2

According to this background-attachment support matrix, no.

Another post suggests that coming up with a workaround for mobile devices is not worth it:

...both Android and iPhone block timers or render during scroll, so the effect is that divs move with the scrolled page and only after, eventually, divs come back in the expected position. This is against position fixed idea

Answer 3

You can potentially get around this using a separate element and position: fixed which does work!

HTML:

<div id="Background"></div>

<div id="Content"></div>

CSS:

#Background {
    background: #000 url("img/Background.jpg") no-repeat 50% 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1
}