Overthrow: An overflow polyfill for responsive design

Posted by Scott on 02/21/2012

We’ve come to take the CSS overflow property for granted when designing websites for desktop browsers. Scrolling regions offer a powerful tool in UI design that we would love to have at our disposal on mobile devices —especially when building app interfaces.

But overflow support among mobile devices is spotty: some browsers support it, but many popular ones at best require 2-finger gestures to scroll the content, and at worst treat the content the same as overflow: hidden, making it inaccessible to users. Newer mobile browsers are making fantastic progress, but when we look across the full landscape, we see many gaps.

So we set out to build a solution that smoothes the way. Overthrow.js is a conservative attempt at filling the gaps in overflow support, with an emphasis on letting native implementations do their thing, and ensuring a usable experience in all browsers.

Overthrow Project Site

For cross-device overflow, no perfect solutions

illustration of a mobile device with a scrolling
region

Overflow support is gaining rapidly in newer versions of mobile browsers. For example, iOS5’s Mobile Safari, the new Chrome for Android, BlackBerry 7+, PlayBook, Android 3+, Firefox Mobile, and WebOS 3 (including) TouchPad, all support the native CSS overflow property. This is terrific news, in theory… But, with the exception of IOS5 and Chrome – which offer a secondary CSS property (momentum scrolling via -webkit-overflow-scrolling: touch) we can use to test and determine that overflow is supported – it’s virtually impossible to detect proper support for overflow. And unfortunately, a significant number of very popular mobile devices run earlier browser versions that don’t support overflow partially or improperly, and will abjectly fail.

This leaves us with a dilemma. Scrolling regions provide great benefits when they work, but unqualified use of them can lead to major accessibility problems. When building with a responsive design approach, we want to deliver a single solution that will serve a variety of devices from handheld to desktop, and we need to know reliably that the tools we use will either work or fail gracefully. With the lack of a definitive test on so many devices and platforms, we were hesitant to use overflow at all. But with the potential benefits, and with so many new devices adding support, it seems important to try to somehow make overflow work.

First, we looked to a number of popular open-source projects that bring overflow support to touch devices to see whether any would satisfy our requirements. Specifically, we were searching for an approach that:

  • Applies overflow as a qualified progressive enhancement, only applying it in devices that we can trust to get it right,
  • Simulates overflow support in popular browsers that do not support overflow natively, but are capable of reasonably handling it with JavaScript,
  • Is lightweight, framework-independent, and can be delivered to any browser without introducing lots of unnecessary overhead,
  • Uses native scroll properties like scrollTop, to play nicely with native browser behavior such as deep-linking to document fragments,
  • Requires no additional markup containers and simulates scroll without introducing unexpected positioning contexts, rendering issues, or problems with form control accessibility,
  • Provides an accessible experience to every browser.

Most importantly, we wanted an approach that is designed to slowly kill itself off, allowing native implementations to do their thing as support becomes better and better.

In reviewing the existing solutions, we determined that none we could find satisfied all the above criteria. So we set out to build one that does.

Introducing Overthrow, a solution to bridge the gaps

Overthrow is a conservative attempt at addressing inconsistent overflow support, and ensuring a usable experience in all browsers.

Simply put, Overthrow provides a means to take advantage of native overflow in browsers we know can support it, deliver simple content that’s left uncropped and fully accessible in cases where we know overflow will not work, and delivers a polyfill solution to provide a little ‘help’ to a subset of mobile browsers that need it.

Basic use

First, download and reference overthrow.js from your document. Anywhere’s fine.

<script src="overthrow.js"></script>

Then put a class of overthrow on any elements in which you’d like to apply overflow: auto or scroll CSS.

<div id="foo" class="overthrow">Content goes here!</div>

In browsers that Overthrow deems capable of scrolling overflow content (either natively, or using its touch polyfill), it will add a class of overthrow-enabled to the html element. Add the following CSS to your stylesheet somewhere, enabling overflow on all elements in your document that have an overthrow class.

/* Overthrow CSS:
   Enable overflow: auto on elements with overthrow class when html element has overthrow-enabled class too */
.overthrow-enabled .overthrow {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

That’s it. Design away! Any time you want to set dimensions on an element to use overflow scrolling, just be sure to key off that overthrow class on the HTML element, and overflow: auto will apply.

.overthrow-enabled #foo {
    height: 280px;
}

Overthrow is still in initial development (version 0.1 at publishing time), but the results so far are quite promising. We’re looking to continue developing Overthrow in the open and would greatly appreciate help with testing and code improvements, particularly related to any issues in the tracker.

Please check out the project website for more information on Overthrow and how to use it in your projects. There are also a couple of quick & dirty examples that demonstrate Overthrow in real-world layouts: a Responsive Columned Layout and a Responsive Dialog Layout.

The code is hosted on Github; if you’re able, please file bugs and suggest improvements in the issue tracker.

600

Comments

You rock :) Shame on Windows Phone 7+ for no support of touch events..!

Comment by Nico Prat on 02/22  at  12:25 PM

Very nice! I use a combination of techniques to achieve this, but I like having a single solution. It works great on my droid and iphone4, Thanks!

Comment by RyanOC on 02/22  at  01:38 PM

Hi,

Thank you for your nice writing on Overthrow: An overflow polyfill for responsive design

Thanks.

Comment by sams on 02/24  at  07:17 AM

This is great and a huge help. Only thing to remember is using iOS5’s native momentum scrolling cuts off the content if anything inside has relative or absolute positioning! I hope this bug gets fixed soon.

Comment by Stefan on 02/28  at  06:09 AM

Hey Stefan
Sounds troubling! I’m not sure I’ve come across that one before with the iOS5 scrolling. Have you reported it to Apple? Do you have an example that demonstrates it by any chance?

Thanks :)

Comment by Scott (Filament) on 02/28  at  06:15 AM

Hi Scott,

there’s a post about it here -

http://stackoverflow.com/questions/7808110/css3-property-webkit-overflow-scrollingtouch-error

someone has contacted Apple and they are aware of it

“After further investigation it has been determined that this is a known issue, which is currently being investigated by engineering. This issue has been filed in our bug database under the original Bug ID# 10336367”

came across it the other day on a client project and couldn’t figure out what was going wrong! if you set the property to ‘auto’ rather than ‘touch’ it works fine but you lose the momentum

Comment by Stefan on 02/28  at  08:31 AM

Hey Stefan,
Thanks!

Ugh - that reply looks familiar - same thing they told me after filing a bug for the viewport orientation change zoom bug 2 years ago too (still not fixed...).

I just tested making my inputs positon: relative in the overflow div, and sure enough, the do disappear in native scrolling in iOS5. Fortunately, they do reappear on scroll stop, and are usable then too. Do you find the same?

Nasty one, nonetheless.

Comment by Scott (Filament) on 02/29  at  03:01 AM