Like all polyfills, Overthrow seeks to use the latest and greatest built-in support when it can, and fills in the gaps with Javascript implementations when the current browser isn’t up to the task. So, what to do about it?įortunately, there’s a pretty nice new poyfill, Overthrow, that can help plug the scrolling holes. On other platforms, not every mobile browser support overflow:auto or overflow:scroll and support for -webkit-overflow-scrolling is even more unlikely as you move beyond iPhones and iPads. iOS 4 doesn’t support overflow scrolling or the native touch behavior your elements won’t scroll at all with this technique before iOS 5. Filling the gapsĪnother issue with the native scrolling in iOS 5 is backward and cross-browser compatibility. Also, iOS 5.1 does not appear to fix the scrolling issues. This is not ideal in all situations, of course, and I’ll be looking for alternatives in the future. The solution in this case was to fix the height of the elements. On the aforementioned complex layout, which for various reasons mimics a table, some of the elements in the cells were rendering incorrectly even with translate3d(). Update: I have found since writing this that even the hardware acceleration hack doesn’t cure all rendering ills. This isn’t the most performant selector, but it gets the job done in a way that working with the individual elements just didn’t cut it. The solution there was to use a scope universal selector. This turned out to be true on a very complicated faux table in our really big HTML5 iPad app. One thing I have found is that sometimes, you need to apply the hardware acceleration hack to all of the child elements inside the scroller. Sprinkling this 3D fairy dust on your elements with position:relative and your rendering issues will vanish. How do you do that? With a little 3D magic, via a no-move translation with this declaration: -webkit-transform: translate3d(0,0,0). If you force Mobile Safari to use hardware acceleration when drawing the positioned elements, the rendering errors disappear. Lucky for us, there is relatively (ahem) painless workaround. This is particularly true for stuff that gets rendered off-screen.
The problem is seems pretty awful at first: if you use the new native scrolling behavior on elements that use or contain children with position:relative, you may end up with some pretty gnarly rendering areas. Unfortunately, Apple released a buggy implementation of -webkit-overflow-scrolling: touch.
And it’s easy to implement.įor example, to add scrolling on an element with class=”scrolling-element”: Fast Scrolling, Broken Rendering The inclusion of scrolling on clipped elements is great and goes a ways towards making it much easier to layout HTML5 pages and apps in a consistent manner, and closes the gap a bit between web and native behaviors. In addition, support for fancy and fast bounce-scroll behavior is provided with the inclusion of the -webkit-overflow-scrolling: touch vendor-specific declaration. When Apple released iOS 5 in 2011, one of the improvements included in Mobile Safari was the inclusion of support for scrolling of block elements with the CSS overflow:auto or overflow:scroll declarations.
0 kommentar(er)
