The page I am working on has a javascript function executed to print parts of the page. For some reason, printing in Safari, causes the window to somehow update. I say somehow, because it does not really refresh as in reload the page, but rather it starts the "rendering" of the page from start, i.e. scroll to top, flash animations start from 0, and so forth. The effect is reproduced by this fiddle: http://jsfiddle.net/fYmnB/ Clicking the print button and finishing or cancelling a print in Safari causes the screen to "go white" for a sec, which in my real website manifests itself as something "like" a reload. While running print button with, let's say, Firefox, just opens and closes the print dialogue without affecting the fiddle page in any way. Is there something with my way of calling the browsers print method that causes this, or how can it be explained - and preferably, avoided? P.S.: On my real site the same occurs with Chrome. In the ex
iOS 5 will have support for position:fixed.
ReplyDeleteThis fixed position div can be achieved in just 2 lines of code which moves the div on scroll to the bottom of the page.
ReplyDeletewindow.onscroll = function() {
document.getElementById('fixedDiv').style.top =
(window.pageYOffset + window.innerHeight - 25) + 'px';
};
See Google's solution to this problem. You basically have to scroll content yourself using JavaScript. Sencha Touch also provides a library for getting this behavior in a very performant manor.
ReplyDeleteThis may interest you. It's Apple Dev support page.
ReplyDeletehttp://developer.apple.com/library/ios/#technotes/tn2010/tn2262/
Read the point "4. Modify code that relies on CSS fixed positioning" and you will find out that there is very good reason why Apple made the conscious decision to handle fixed position as static.
I think gmail just tracks the scroll position on a timer and repositions a div accordingly.
ReplyDeleteThe best solution I've seen is at doctyper.
A simpler jQuery solution that moves an element onscroll: link
it worked for me:
ReplyDeletefunction changeFooterPosition() {
$('.footer-menu').css('top', window.innerHeight + window.scrollY - 44 + "px");
}
$(document).bind('scroll', function() {
changeFooterPosition();
});
(44 is the height of my bar)
Although the bar only moves at the end of the scroll...
I found this just now: http://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/
ReplyDelete(This question was also in the Google search results.)
(Sorry for the necrobump.)
I found the gmail solution for floaty bar.
ReplyDeletehttp://googlecode.blogspot.com/2009/09/gmail-for-mobile-html5-series-css.html
This solve position fixed bug:
ReplyDeletewww.appml.org
This is how i did it.
ReplyDeleteI have a nav block that is below the header once you scroll the page down it 'sticks' to the top of the window.
If you scroll back to top, nav goes back in it's place
I use position:fixed in CSS for non mobile platforms and iOS5.
Other Mobile versions do have that 'lag' until screen stops scrolling before it's set.
// css
#sticky.stick {
width:100%;
height:50px;
position: fixed;
top: 0;
z-index: 1;
}
// jquery
//sticky nav
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('#sticky-anchor').offset().top;
if (window_top > div_top)
$('#sticky').addClass('stick');
else
$('#sticky').removeClass('stick');
}
$(window).scroll(function(event){
// sticky nav css NON mobile way
sticky_relocate();
var st = $(this).scrollTop();
// sticky nav iPhone android mobile way iOS<5
if (navigator.userAgent.match(/OS 5(_\d)+ like Mac OS X/i)) {
//do nothing uses sticky_relocate() css
} else if ( navigator.userAgent.match(/(iPod|iPhone|iPad)/i) || navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) ) {
var window_top = $(window).scrollTop();
var div_top = $('#sticky-anchor').offset().top;
if (window_top > div_top) {
$('#sticky').css({'top' : st , 'position' : 'absolute' });
} else {
$('#sticky').css({'top' : 'auto' });
}
};
<meta name="viewport" content="width=320, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
ReplyDeleteAlso making sure height=device-height is not present in this meta tag helps prevent additional footer padding that normally would not exist on the page. The menubar height adds to the viewport height causing a fixed background to become scrollable.