Scrolling hides content on Mobile Safari
Over the past 3 weeks I’ve been working on a mobile website for a hybrid iPhone app. This has been quite a learning experience, both from the technology point of view (we used Spine.js mobile) and from the User Experience point of view.
One of the challenges when developing this type of hybrid application is to make the web experience feel as close to the native experience as possible. Ideally the user shouldn’t be able to distinguish between the native and web parts of your application.
One of the CSS tricks that makes this possible is to enable momentum scrolling which became available in iOS 5.
-webkit-overflow-scrolling: touch;This property will use hardware acceleration to provide native scrolling for a scrolling area.
Unfortunately there is quite a nasty bug in iOS 5 when using this property – any content that uses position: relative will disappear while the user is scrolling. Even worse, we found that the browser will simply stop the rendering if the user performs an action while scrolling (which is a very common use case).
According to this post on StackOverflow this is a know issue and Apple is aware of it. This seems to have been fixed in iOS 6, but if you’re looking to support iOS 5 devices your only hope is to stop using position: relative anywhere in your code.