Knee Deep in CSS

I hadn’t done anything serious with web design in years. I’m working on a project that generates some game play statistics for an iPhone game using UIWebView.

On one hand, it’s nice to have a set browser and size to work with … on the other, Mobile safari has enough oddities that make some simple things hard. One design element we wanted was a status bar that stayed at the bottom of the view. This is very simple in a desktop browser. Mobile Safari renders the entire page then give a viewport into it which makes the status bar stay where it was originally drawn and scroll with the page. I pieced together some JavaScript that would move the status bar back to the bottom of the viewport after the page was scrolled. This approach worked great in Mobile Safari but was glitchy when inside UIWebView.

We altered the design.

I’m big on code reuse and tried a few different CSS and JavaScript libraries that provided iPhone-like elements, specifically iui and iWebKit. While both were fine for a limited set of elements, they were very heavy handed with what could be done on a page. After altering and fighting with iWebKit, I scratched using it as is and just started ripping some parts that I needed out.