#glo.com

[slytrunk]

The Glo.com iPad App is now available from the Apple App Store; Sly Trunk's first foray into iOS app development. More coming soon!

- Ben

[slytrunk]

iOS6 Web App Flickering with -webkit-overflow-scrolling: touch;

Changes were introduced in Safari and Webkit in iOS 6 that made content in certain scenarios flicker or flash following or during transitions. The tried and trusted pre-iOS 6 way to fix flickering was to scatter various css hacks to fool webkit into delegating to the GPU, which provided enough oomph to avoid the unsightly flickering. No doubt liberal usage of the well documented hacks were taxing device batteries, so as per the release notes:

WebKit no longer always creates hardware-accelerated layers for elements with the -webkit-transform: preserve-3d option. Authors should stop using this option as a way to get hardware acceleration.

iOS SDK Release Notes for iOS 6

Fortunately, the majority of the borderline scenarios in my Glo.com hybrid app escaped the flickering; perhaps removal of the hack was accompanied by improvements to the default rendering engine. One bug that was quickly identified, however, boiled down to scrollable sub elements, i.e.:

overflow: hidden;

overflow-y: scroll;

-webkit-overflow-scrolling: touch;

In particular, toggling -webkit-overflow-scrolling: touch; via Adobe Edge Inspect would trigger the flicker/re-rendering even outside the context of a transition. This ruled out initializing scrollable elements post-transition.

In the absence of a satisfactory work around, I have removed the pleasant -webkit-overflow-scrolling: touch; behavior from such elements for iOS 6 only. I'm hoping a work around emerges soon.

[fleuryrosenails]

Learn expert tips on how I created my Day of the Dead nails, plus many more to have a Goulishly Glam Halloween with Glo.com!