iOS 8 - White Flash

[Stevf]

Changes in iOS8 (final) mobile safari causes white flashes between pages. Transitioning between pages on iOS-8 devices now results in a white flash occurring between page loads, tested using Version 1, Release and demo preview (http://jqtjs.com/preview/demos/main/index.html) both exhibit the white flash issue.

This is going to be annoying for users and devs, hopefuly its not a difficult fix, any suggestion would be helpful. thanks

[BrettGregson]

Having the same issue since updating to iOS8

[Stevf]

Yes, its effecting all my apps been looking through the code and jquery forums as well (as it might be related to that) to find a solution, but so far no luck.. quite annoying ios's new web engine seems to have caused a lot of issues.

[BrettGregson]

I'm also trying hard to find a fix, will post here if I do (please do the same)

[nburch]

Hi,

Just wanted to point out that I am using the latest builds and am NOT
seeing this issue any of my sites or in the demo sites.

• I am using iOS 8 (official release version) on an iPhone 5S

On Mon, Sep 22, 2014 at 9:18 AM, Brett Gregson [email protected]
wrote:

I'm also trying hard to find a fix, will post here if I do (please do the
same)

—
Reply to this email directly or view it on GitHub
#516 (comment).

[thomasyip]

I tried with the demo with a iPad (retina) on iOS 8, and iPhone 5S, and iPhone 6, none of them show a white flash. (all iOS is release version).

Were some of you been using iOS 8 beta?

Please reopen with specifics if you are having problem with released version of iOS.

[Stevf]

Issue occurs on iOS-8 final not beta running on iPhone 5, iPhone 6 and iPad Mini retina (see video below), the flash appears when navigating between pages especially when navigating back to the home page.

Screen Recording: https://www.dropbox.com/s/v9d5a9o7ui87eqb/WhiteFlash.mp4?dl=0

Shows flash in standard demo (http://jqtjs.com/preview/demos/main/index.html) running on an actual device captured through reflector, i get the same flash in my own app but more white as i use the ios jQTouch theme.

[thomasyip]

Thanks for the screen recording. I am able to repro it.

The animation runs fine inside the Safari and with PhoneGap. "Add to Home screen" mode has flash. Is it what you sees too?

[Stevf]

Yes, for my app im not using PhoneGap but instead using the native UIWebView to load the web-contents and it displays the same issue as pinning to the "Home screen". I've also tried using the newer WKWebView provided with iOS-8, but that also exhibits the same flash issue when navigating between pages.

nb. Seems related to iOS-8 as my same app running on iOS-7 doesn't have any flashing. Also it doesn't seem to occur inside Safari but appear in the "Add to Home screen" mode and inside apps using UIWebView/WKWebView.

[nburch]

This seems to be happening when items are in FULL SCREEN. On several mobile sites I have done, if you view in safari there is no flicker. When you add to home screen though then it is there.

To clarify: The reason I mention this is in this case these are mobile sites not apps and no Xcode involved.

[vbcodep]

I am seeing the same thing, however, it appears that class="disolve" will eliminate the flicker. Not ideal but a workaround.

[jordandobson]

Sounds like a redraw flicker to me.

Mobile • 425.444.8014

On Sep 23, 2014, at 8:27 PM, vbcodep [email protected] wrote:

I am seeing the same thing, however, it appears that class="disolve" will eliminate the flicker. Not ideal but a workaround.

—
Reply to this email directly or view it on GitHub.

[thomasyip]

I spent an hour on it, but haven't found a workaround. Will find some time again tomorrow.

It appears that when an animated

is set to display: none, a white flash is resulted. transition seem to be fine.

Obvious a bug in the browser. But I feel that it is important to find a workaround until they get it fixed.

[cybermill]

I'm just getting in on the conversation here. I can confirm all of it. Tried it in phonegap. Also tried the JQTouch demo in phonegap. On the phone and on the simulator. It is consistent in that it only flickers in iOS8. It is flawless in iOS7. The flicker happens after the the slide transition is complete.

Thanks for all you do Thomas. I appreciate it.

[jordandobson]

Do you release any hardware acceleration after a slide is complete? That could definitely be what's doing it.

Mobile • 425.444.8014

On Sep 25, 2014, at 4:53 PM, Jeff Walters [email protected] wrote:

I'm just getting in on the conversation here. I can confirm all of it. Tried it in phonegap. Also tried the JQTouch demo in phonegap. On the phone and on the simulator. It is consistent in that it only flickers in iOS8. It is flawless in iOS7. The flicker happens after the the slide transition is complete.

Thanks for all you do Thomas. I appreciate it.

—
Reply to this email directly or view it on GitHub.

[thomasyip]

I tried about 20 different combinations / sequence of removing / keeping all, some animation attribute, I have yet found one that doesn't flicker.

As a good practice, animations attributes should be removed after the animations ends, transform should set to none, etc. Because all these consumes memory, and directly increases crash rate on mobile browser.

That's being said, I am willing to put a iOS 8 specific (agent string) workaround as long as I found one combinations that doesn't flicker.=

[rpavlov]

Hello all, I came across this post while looking for a solution to keyframe animations flickering in ios8 under fullscreen mode.

My solution was to use translate3d() in lieu of translate() for my css3 animations.

[thomasyip]

Alright. I will try it out tonight or tomorrow morning.

Thanks for the tip!

[cybermill]

Replacing translate3d for translateX in the slideLeft and slideRight in the css didn't really show any improvement with my tests. I'm curious to see what you all discover.

[cybermill]

I've been wondering if this might not resolve itself after phonegap integrates wkwebview into their builds.
That is what safari uses, as i understand it, and that seems to have no problems.

[thomasyip]

@cybermill -- I did not see problem with PhoneGap usage. But, @Stevf saw the issue with both UIWebkit and WKWebView.

@rpavlov, I replaced translated3d for translateX, unfortunately, it didn't solve the problem.

I also tried to use webkit-transition in leu of webkit-animation. It seems to causes less white flash (i.e., one every few page), but it didn't eliminate it either.

[iamnotnader]

Hey there, I'm having exactly this issue on ios8 using phonegap. It happens when I initiate animations using translate[X|Y]. Has anyone found the solution yet?