Fixed position not working on ios devices

Question

I am working on implementing a couple of instances of http://amsul.ca/pickadate.js/ but i seem to be running into a couple of problems with the css. If you view the above site on an ipad or iphone, the calendar is positioned correctly, as the container covers up the window as a good fixed position element should do. But if you were to see my site, and pull up the calendar, then you would see the calendar container (the greyed out background) starting from the bottom left corner of the input that it is next to (as if it were positioned relative) and extending with the same dimensions of the window. In addition to this, when I inspect in mobile safari's web inspector on my mac, the blue box, which usually indicates where the div is being positioned is fixed to the top of the document and not necessarily the window.

The only error I'm getting are a 404 from a stylesheet that has nothing to do with this plugin.

here are 3 screenshots of the problem that i am facing, the first has shows the input that the div with the calendar is just after

http://www.dumpt.com/img/viewer.php?file=rvipsnuyfyuv8u6xt5dr.png

the second is where inspector seems to think it is rendering and you can see the translucent background further down the page

http://www.dumpt.com/img/viewer.php?file=nc7el13lcthqlzrsfarg.png

and the third shows that it seems to be the correct dimensions and everything, but the calendar does not seem to be positioning itself correctly

http://www.dumpt.com/img/viewer.php?file=8hbswbfv9abwobkth8iq.png

If anyone has any ideas about why this might be I would love to hear them because right now, i'm at a loss.

EDIT

This page has been tested on android devices and works perfectly.

Answer 1

Ok, so it seems that mobile does not support fixed elements very well.

http://www.quirksmode.org/m/css.html

Search: fixed

which is really unfortunate. If anyone has any workarounds for this, that would be really great.