Menu
I have a div at the top of my mobile application that is position:fixed so it will stay on the top of the browser (it scrolls away in ios 4 and lower which is fine). When an input is focused and brings up the keyboard, the div moves down to the middle of the page. See screenshots:
http://dbanksdesign.com/ftp/photo_2.PNG
Edit: Here is a simplified test page: http://dbanksdesign.com/test/
<body>
<div class="fixed"><input type="text" /></div>
<div class="content"></div>
</body>
.fixed { position:fixed; top:0; left:0; width:100%; background:#ccc; }
.content { width:100%; height:1000px; background:#efefef; }
703
Unfortunately you are probably best off using absolute positioning for your fixed elements when working with IOS. Yes, IOS5 does claim to support fixed positioning, but it all falls down when you have interactive controls within that fixed element.
I had the same problem with the search box on my switchitoff.net site. In IOS5 the fixed header would jump down the page if the search box gained focus while the page was scrolled. I tried various workarounds, and the one I currently have is a <div> which sits over the search box. When this <div> is clicked the following occurs:
fixed header is changed to absolute
<div> covering the search box is hidden<input> is focusedThe above steps are reversed when the search box loses focus. This solution prevents the header jumping down the page when the search box is clicked, but for a simpler site you are probably better using absolute positioning in the first place.
There is another tricky issue with IOS5 and fixed positioning. If you have clickable elements on your fixed area with body elements scrolled behind them, this can break your touch events.
For example, on switchitoff.net the buttons on the fixed header became unclickable when interactive elements were scrolled behind them. touchstart was not even being fired when these buttons where tapped. Luckily onClick still seemed to work, although this is always a last resort for IOS because of the delay.
Finally notice how (in IOS5) you can click on the fixed header and scroll the page. I know this emulates the way you can use the scroll wheel over a fixed header in a normal browser, but surely this paradigm doesn't make sense for a touch-UI?
Hopefully Apple will continue to refine the handling of fixed elements, but in the meantime it's easier to stick with absolute positioning if you have anything interactive in your fixed area. That or go back to IOS4 when things were so much easier!
140
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
