iPhone & iPad position: fixed bottom problem

Question

http://t1.kameleo.ch/

if you scroll down you will find a login button under the footer. If you click it, the login appears on the bottom of the screen.

I have done this with a negative fixed positioning relative to the bottom of the page. This works fine in every browser, expect for mobile devices such as the iPad and the iPhone. The login bar appears on the middle of the screen.

Screenshot on iPhone: http://img844.imageshack.us/i/photoe.png/

Does anyone know a work around for this?

Answer 1

The reasons this happens is that the iOS browsers use a viewport that moves around the window, that means that fixed position is fixed in regards to the window, but not the viewport. You'll need to position it using JavaScript by checking the current viewport position.