Is it possible to style the page background in lion revealed when scrolling with multitouch
Chrome and Safari in Lion have an overscroll feature like Mobile Safari, when using a touch input.开发者_开发问答 On most web pages the background revealed is a sort of grey parchment pattern. Although, there are some website that don't show this background and either have a single colour or a repeated version of whatever the background of the first pixel.
Stack Overflow behaves as expected stack overflow screenshotAnd the mozilla website is shown below firefox features screenshot
So far I haven't been able to identify a single reason why this happens. Is it something documented? And is there a method to replicate it? Either with the background of the first pixel stretched upwards or with something completely different. Going even further with that. If it is possible to replicate this, could the effect be used to recreate the 'pull to refresh' feature found in many mobile applications? In other words, is this overscroll measured within the dom or is it just an effect generated by the OS? ThanksWhat you are talking about is actually a behavior that is common to all lion-ized apps. Chrome 15 (and 16) support this, whereas Chrome 14 doesn't. It's a matter of whether the app has been touch optimized or not.
I don't think there is any way to control this behavior (unless the browser introduces some kind of "overscroll" javascript event -- highly doubt this will happen).
There is also no known way to style this region through CSS.
This works in chrome 15.
The combination of position: fixed, top:0 and a 3d transform operation seem to lead to this behavior.
<!doctype html>
<head>
<style>
#header {
position: fixed;
top: 0;
background: red;
}
#content {
/*
-webkit-transform: rotate3d(0,0,0,0deg);
*/
-webkit-transform: scale3d(1,1,1);
}
</style>
</head>
<body>
<div id="header">header</div>
<div id="content">content</div>
</body>
</html>
加载中,请稍侯......
精彩评论