Does a Background-Attachment of Fixed Work in iOS5

does a background-attachment of fixed work in iOS5?

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

iOS moves background image when positioning fixed

I found a quite suboptimal solution, but at least it works. I don't use background-image in CSS anymore but put a img tag inside the background div and position it absolute:

#background img {
top:0;
left:0;
right:0;
bottom:0;
position:absolute;
}

Here is the fiddle

Unfortunately, the paragraph "this is text" is not vidible anymore. Lucky, thats it's just for background...

Also the image is not centered anymore, nor resized correctly :[

Edit

I added the following CSS to fix the positioning:

#background img {
margin-left:auto;
margin-right:auto;
}

Workaround for 'background-attachment: fixed' which is not working in iOS4

I am not sure what is going on with the CSS and have not had a chance to check it out for myself but I know when I was trying to get rid of the shadows from a UIWebView I used this bit of code:

NSArray *sv = [NSArray arrayWithArray:[myWebView subviews]];
UIScrollView *webScroller = (UIScrollView *)[sv objectAtIndex:0];

NSArray *wsv = [NSArray arrayWithArray:[webScroller subviews]];

[[wsv objectAtIndex:6] setHidden:YES];
[[wsv objectAtIndex:7] setHidden:YES];
[[wsv objectAtIndex:8] setHidden:YES];
[[wsv objectAtIndex:9] setHidden:YES];

and it got rid of the shadows. I thought I got the answer off of a SO question but when I looked for it this is the only one that came up.

It passed App Store inspection.

How can I set fixed position Background image in jquery mobile for iPhone app using Phonegap

Ok, so what I did instead was to create a fixed element within the body element of the page.
So it would look like

<body>
<div id="background"></div>
...
</body>

And for the CSS I stated the following:

    #background {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background: url(images/bg-retina.jpg) 0 0 no-repeat fixed !important;
background-size:contain;
}

And this did the trick for me. Hopefully it helps (someone out there :P)



Related Topics



Leave a reply



Submit