search

senchalabs / jQTouch

Create powerful mobile apps with just HTML, CSS, and Zepto.js (or jQuery).
http://www.jqtouch.com/
MIT License
2.79k stars 592 forks source link

iOS 8 - White Flash #516

Open Stevf opened 9 years ago

Stevf commented 9 years ago

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 commented 9 years ago

Having the same issue since updating to iOS8

Stevf commented 9 years ago

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 commented 9 years ago

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

nburch commented 9 years ago

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.

On Mon, Sep 22, 2014 at 9:18 AM, Brett Gregson notifications@github.com 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 https://github.com/senchalabs/jQTouch/issues/516#issuecomment-56370841.

thomasyip commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

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

jordandobson commented 9 years ago

Sounds like a redraw flicker to me.

Mobile • 425.444.8014

On Sep 23, 2014, at 8:27 PM, vbcodep notifications@github.com 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 commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

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 notifications@github.com 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 commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

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

Thanks for the tip!

cybermill commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

@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 commented 8 years ago

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?