Would You Like Pickles On Your Shit Sandwich?
After reading Craig Hockenberry's little piece on Safari for the iPhone's lack of support for fixed positioning—despite the fact that Safari 2 on Mac, and Safari 3 on Mac and Windows do—I got a bug up my butt to stay up late last night to find a workaround. Not only did I not find a workaround, I found that Safari on iPhone had a few bugs up it's butt as well. Unfortunately, these bugs are much bigger and yuckier than the fixed positioning I set out to fix hack in the first place.
After reading Craig Hockenberry's little piece on Safari for the iPhone's lack of support for fixed positioning—despite the fact that Safari 2 on Mac, and Safari 3 on Mac and Windows do—I got a bug up my butt to stay up late last night to find a workaround. Not only did I not find a workaround, I found that Safari on iPhone had a few bugs up it's butt as well. Unfortunately, these bugs are much bigger and yuckier than the fixed positioning I set out to fix hack in the first place.
My big idea was to build a similarly structured page to Hockenberry's by wrapping the main content of the page in a, and setting it to an iPhone friendly hight, minus 4o or so pixels for the menu. I chose 300px. The menu would then be positioned :absolute;
and placed 300px from the top of the page. I then set the div containing the main content to overflow:auto;
so that the content inside it would scroll. View my Safari iPhone overflow test page on iPhone if you like.
On the iPhone, the content does not scroll. iPhone seems to only want to scroll the entire page. I suddenly recalled the visit I paid to my newsgator page in attempt to read my feeds from my iPhone earlier that day. I found it curious that the lists of unread articles were cut off at the bottoms. This was my first visit to my newsgator page, so I didn't realize the site made such extensive use of the overflow property on their reader page.
It occurred to me that I had yet to see a scroll bar applied to any web page element on an iPhone. Even textareas. Yeah, uh oh. View my Safari iPhone textarea test page on iPhone.
It certainly doesn't. And it's certainly not a good thing. It really limits the iPhones capabilities with respect to web forms—the life's blood of web 2.0.
I have yet to look deeper into the iPhone development documentation to see if this is a known limitation of its touch screen nature, or if a bug has been filed, or of there is a published workaround. Because of this, I haven't filed a bug myself, but would encourage any developers to look into it. I'll check up on it this later in the week when I have time.
In the mean time, not being able to update blog entries from iPhone is the shits.
[Update:] I just reported the bug. Reference Bug ID# 5328339 if you have more juice on this sucker.
[Update:] Please note Rob V. and Jeff D.'s reference to Matthew Krivanek's two-finger gesture solution for scrolling textareas and overflow:auto;
styled elements in the comments. Also thanks to Craig Hockenberry for discovering the two-finger method works for overflow:auto;
.