Div Overflow and iPhone Browsing

Using the overflow style attribute on the div tag is pretty common.  I used this on AroundCloud.Com to create a styled “listbox”.  I was surprised to learn the iPhone browser handles this in the most bazaar way.

The Problem:

I guess the first part of the problem is that if your user’s are browsing the site the iPhone OS2 or lower the overflow attribute is not supported.  If your user’s have iPhone OS3 or greater then you are in luck.  It is supported as a two finger scroll gesture.  Although supported, there no visual cue the user is has a scrollable area.  As the developer of the site I assume I could add arrows, signs, or something but this seems like an odd gesture to provide instructions for.

I guess this leaves the question of why does it act this way, what does it look like, and is there a solution?

The Facts:

  1. Before iPhone OS 3 was released the div overflow tag didn’t work at all and simply displayed the content that was visible without the scroll.
  2. iPhone OS 3+ Apple implemented a two finger scroll when a div with an overflow was found.

When reading the iPhone OS 3 has support for div overflows I was excited, I now didn’t need to re-write a section of my site for iPhone users.  But, what the heck is a two finger scroll?  Since this was a new one for me I figured I’d create an example.

The Example:

This div has overflow: scroll and will be a two finger scroll area

Use the two finger scroll gesture anywhere the box is orange

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

image

 

The Div Code:

 

How Does It Look?

What it looks like in your desktop browser?
image 

What it looks like on your iPhone?
image
image

The Solution:

There really isn’t a, one size fits all solution.  Depending on the design of your site you might be able to use a HTML Select Tag, a list,  or a custom listbox style control.  For my project, I choice to implement an iPhone only experience using the IUI project’s framework to provide a native tableview look and feel. 

For me this was the right decision since provide a view based on the user agent is fairly straight forward with ASP.Net MVC.  You can read more about that here.

This is just one example of how the mobile web is impacting pretty common development practice.  The explosion of the mobile web will force us to look even designs we think are straight forward in new ways.

0 comments:

Post a Comment