My idea was that I’d make the viewport as wide as a single column but force at least 2 columns, and let the user swipe or tap to slide the viewport right and left across all the pages. When I implemented it, it appeared to work great. There was just one problem.
WebKit CSS3 columns are actually broken.
The problem is that elements that are flowed into columns don’t report their position properly. They report their position as if they weren’t in the column at all, but instead had just flowed normally.
This is pretty much a deal-breaker if you want to be able to know what text is on the current “page”, for example, to sync your position across devices.
Here’s a test case that exhibits the problem. I’m requesting the horizontal position of an element that falls in the second column. It should report a value that’s greater than the width of the first column. Instead it reports a tiny value, as if that text were actually positioned up against the left margin.
Ironically, Firefox, which lags behind WebKit in its HTML5 support, does the correct thing:
You can download the test case and run it in any browser.
I’ve been told that this bug is fixed in the WebKit source, but since we’re at the mercy of the deployed versions on mobile devices we never further investigated. The moment this fix lands in a consumer browser we’ll switch to supporting it, which should be a huge performance boost.
Update March 8, 2010: Confirmed fixed in WebKit nightly, so eventually this fix should filter down to the mobile browsers.