CODEWITHSUNDEEP
ioscsssafariios7.1hardware-acceleration
Bas
Bas

Reputation: 113

Safari iO7: flicker on page transition when using css hardware acceleration

The problem I am having is when viewing my site through any iOS 7 device with Safari. Every time I change page on my website the browser window goes white, and then a moment later the page starts rendering correctly.

Other websites don't do this, so after tearing out my hair for many hours, I narrowed it down to some CSS being applied to my page container. It's forcing hardware acceleration via:

If I remove that css, when changing pages on my site, there is no white flicker in-between page loads. Unfortunately, I need that css to get hardware acceleration and smooth scrolling.

From what I've read I surmise it may have something to do with the html container being promoted to a layer (because its hardware accelerated) and that is somehow causing the browser to render strangely.

I've found a few articles on this, but no answer that has worked for me. Has anyone run into this and maybe have a solution?

EDIT:

So with a bunch more experimenting and reading, I have a few more clues.

What I've found is that any composite layer seems to cause this for me on page load.

For example, my site's menu bar is position:fixed (this makes it a composite layer). When I make the menu not position:fixed, when changing page, the menu bar did not "flicker". i.e. the rest of the page went white and then a moment later the new content rendered, but the menu bar continued to be rendered throughout.

My next experiment seems to indicate that its actually the page being "unloaded" not the new page that is being loaded that is the problem. What I mean by this is: I used the -webkit-overflow-scrolling: touch; css on my container as usual. What I did different was I wrote a line of javascript to remove that css property from the container after a few seconds. Now when I changed page the browser did not go white before rendering the new page. So I think this means it is something to do with how the Safari browser unloads a page that has composite layers on it.

Could anyone confirm if my suspicions may have some merit or if I'm COMPLETELY misreading the situation?

(apologies if my terminology is incorrect, I'm still a little new to web tech)

Upvotes: 0

Views: 987

Answers (2)

AppsolutEinfach
AppsolutEinfach

Reputation: 1521

With iOS 8 a new faster web view component was introduced: WKWebView. Safari use it.

  1. The page unload problem in association with composited layers resp. position fixed elements went away when using Safari under iOS 8 :)

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

Upvotes: 0

robjez
robjez

Reputation: 3788

I know that in some cases using less known css properties tackles this issues. So give a try to: 

-webkit-perspective: 1000;    
-webkit-backface-visibility: hidden;

These should go together with your:

-webkit-transform: translate3d(0,0,0);
-webkit-overflow-scrolling: touch;

properties.

Hope this will help

EDIT: Just be aware of this issue

Upvotes: 0

Related Questions