JQTouch and CSS position: fixed; Issue on iOS 5

I recently finished a marathon CSS debugging session, where I was working on figuring out why a simple position:fixed; wasn’t working in my iOS 5 (the first iOS version to support the property) project that also included a (potentially outdated version of) JQTouch.

I quickly figured out that I could get it to work if I removed JQTouch from my project, but as that was not an option, I had to delve into the JQTouch files and figure out the issue. Removing the main jqtouch.css file from the page worked also, so I narrowed my search to that file.

I performed what amounted to a log(n) search, commenting out half of the file to figure out which half held the problematic code. I repeated this on the half that fixed the error until I narrowed the culprit to the following lines:

[crayon lang=”css” toolbar=”false” nums=”false”]#jqt.supports3d{-webkit-perspective:1000}
#jqt.supports3d > *{-webkit-transform:translate3d(0, 0, 0) rotate(0) scale(1)}[/crayon]

No part of that looked familiar to me, but since commenting out those 2 lines fixed my problem, I wasn’t too concerned. It appears that supports3d is a class added and used by the JS in jqtouch.js, presumably to make the page look better when it is supported. This also tells me that it’s not necessarily the best way to fix the error (since the supports3d class will still be added by the JavaScript); but again, since it works, I’m not complaining.

Note also that I’m not sure that this is even a complete solution to the issue, because the behavior I observe using this is still suboptimal: the element is fixed during normal scrolling, but if the screen is ‘flicked’, the element scrolls with the screen and then repositions itself when the screen comes to a stop.