Workaround for 'background-attachment: fixed' which is not working in iOS4_问答_开发者

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

开发者 https://www.devze.com 2023-02-10 03:55 出处：网络

I\'m struggling to get web page with a fixed background image, so the image does not move when page is scrolled in a UIWebView.

相关专题：css ios4

I'm struggling to get web page with a fixed background image, so the image does not move when page is scrolled in a UIWebView.

What I've discovered is: background-attachment: fixed does not work in iOS4 (using 4.2.1). To double-check I've prepared a page with code snippet (below) inside <head> section and the page works as expected under Safari and Firefox on Mac, but fails to do so in iPhone's Safari...

What do you suggest as a workaround for achieving the expected results? I've made my UIWebView translucent and added UIImageView, so I can see "fixed background image" through translucent page. Unfortunately, I can see UIWebView borders when I scroll over its end/beginning edges.

Is there any official Apple resource/web page stating that background开发者_开发技巧-attachment: fixed is not implemented for iOS4?

Cheers!

P.S. The code snippet referred above:

<style type="text/css">  
body {  
    background: #ffffff url('image.jpg') fixed no-repeat;  
    background-attachment: fixed;  
}  
</style>

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.

Use a div for the background with a negative z-index:

<head>
<style>
#background {
    background: url("background.jpg") no-repeat;
    position: fixed;
    top: 0;
    left: 0;
    background-size: 320px 480px;
    width: 320px;
    height: 480px;
    z-index: -1;
}
</style>
</head>

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

This body text appears over the fixed background and scrolls.

</body>

Works on iOS 5 and iOS 6.