5

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?

Frinsh
  • 310
  • 4
  • 14
  • Hard to comment a solution without any real code, but you may want to take a look at: http://css-tricks.com/efficiently-rendering-css/ also you may want to take a look at the network tab in chrome/firefox developer tools. – Ms01 Nov 07 '13 at 09:15
  • Cubsink: I've added a link to an own example showing the issue – Frinsh Nov 07 '13 at 10:05
  • Which iOS are you testing against? I've tried the page on my 5S running 7.0.3, but I'm not noticing any delayed rendering. – Taylor D. Edmiston Nov 08 '13 at 18:08
  • 2
    Do you mean that you want the header and the body to appear at the same time? It is like the header appears after the rest of the page has loaded. – Douglas Nov 10 '13 at 18:11
  • @tedmiston I am getting this in IOS7 myself but on iPhone 4. – Frinsh Nov 11 '13 at 16:22
  • @Douglas Yes, I want them to appear at the same time. – Frinsh Nov 11 '13 at 16:25
  • 1
    One can see Mobile Safari's problem by comparing http://getbootstrap.com/examples/navbar-static-top/ with http://getbootstrap.com/examples/navbar-fixed-top/ . Load the page and look at nav bar when reloading the page. The fixed nav bar disappears for one moment. – AppsolutEinfach Aug 15 '15 at 15:46
  • The problem went away with iOS 8, because Safari uses new faster WKWebView. See also my edited answer below... – AppsolutEinfach Oct 01 '15 at 08:37

2 Answers2

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 :(

Community
  • 1
  • 1
AppsolutEinfach
  • 1,421
  • 1
  • 14
  • 25
-1

One of classic CSS optimisation for elements with a position:fixed, is too put it on a layer. You will avoid the repaint of this zone, when user scroll. To do this, you can add use 3d transform, like this : 

nav {
    background: none repeat scroll 0 0 #FF0000;
    height: 30px;
    left: 0;
    padding: 10px;
    position: fixed;
    top: 0;
    width: 100%;
    -webkit-transform: translateZ(0);
}

Don't forget to add all vendor prefixes. You can enable "show paint rectangle" on Chrome dev tools, to show all repaints off your page.

JuSchz
  • 1,200
  • 2
  • 15
  • 30
  • 2
    The problem though isn't that it repaints when I scroll. The problem is that it seems to render slower than the rest of the content on page load. – Frinsh Nov 11 '13 at 16:30