Elements with fixed position renders slowly on Safari iPhone

Question

I have a responsive website that uses a menu with position fixed on mobile devices.

In Safari on iPhone the menu seems to be rendered slower than the other content. I want it render at the same speed. Is there a solution to this?

Answer 1

It is not a problem while page loading. After hours of testing, I find out that the problem occurs on page unload! The problem is related to WebKit under iOS (Mobile Safari & Chrome). Elements with position: fixed, position: device-fixed or position: sticky disappear on page unload.

see also Fixed positioned elements disappear on page unload

EDIT:

I stick into it...

Fixed elements are lifted to a composited layer and there is a corresponding bug on page unload.

From http://newscentral.exsees.com/item/528d72c6d22fab46e4eb18e5cb8fece0-0d5a1eca143f58f995dc015e265514cb:

"[...] composited layers upon document unload are destroyed much faster than elements that are not [...] This has been confirmed by a WebKit engineer to be a bug."

HOPE:

With iOS 8 a new faster web view component was introduced: WKWebView. Safari use it. The problem went away when using Safari :)

I compare common UIWebView and new WKWebView under iOS 8. Apps using UIWebView to display html/web content are still affected with the problem :(