Workaround for 'background-attachment: fixed' which is not working in 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.
加载中,请稍侯......
精彩评论