Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

iOS 8 - White Flash #516

Open
Stevf opened this issue Sep 20, 2014 · 21 comments
Open

iOS 8 - White Flash #516

Stevf opened this issue Sep 20, 2014 · 21 comments

Comments

@Stevf
Copy link

Stevf commented Sep 20, 2014

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
Copy link

Having the same issue since updating to iOS8

@Stevf
Copy link
Author

Stevf commented Sep 22, 2014

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
Copy link

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

@nburch
Copy link

nburch commented Sep 22, 2014

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
Copy link
Member

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
Copy link
Author

Stevf commented Sep 23, 2014

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 thomasyip reopened this Sep 23, 2014
@thomasyip
Copy link
Member

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
Copy link
Author

Stevf commented Sep 23, 2014

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
Copy link

nburch commented Sep 23, 2014

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.

@thomasyip thomasyip reopened this Sep 23, 2014
@vbcodep
Copy link

vbcodep commented Sep 24, 2014

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

@jordandobson
Copy link

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
Copy link
Member

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
Copy link

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
Copy link

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
Copy link
Member

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
Copy link

rpavlov commented Oct 3, 2014

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
Copy link
Member

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

Thanks for the tip!

@cybermill
Copy link

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
Copy link

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
Copy link
Member

@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
Copy link

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

9 participants