CODEWITHSUNDEEP
angularjsios7
MB.
MB.

Reputation: 4211

AngularJS animation flicker iOS

I'm using a slide animation in my AngularJS app, code below.

When a transition is being started the raw and unparsed incoming view is being displayed for a split second under the existing view. This causes an annoying flicker on iOS7.

How can I remove this flicker?

  .view-animate-container {
    position: relative;
    width: 100%;
  }

  .view-animate {
    -webkit-backface-visibility: hidden;
  }

  .view-animate.ng-enter, .view-animate.ng-leave {
    -webkit-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.3s;
    transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.3s;

    position: absolute;
    width: 100%;
  }

  .rtl .view-animate.ng-enter {
    -webkit-transform: translate3d(100%, 0, 0);
    -webkit-transition-delay: 0.1s;
    opacity: 0;
  }
  .rtl .view-animate.ng-enter.ng-enter-active {
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  .rtl .view-animate.ng-leave.ng-leave-active {
    -webkit-transform: translate3d(-100%, 0, 0);
    opacity: 0;
  }
  .ltr .view-animate.ng-enter {
    -webkit-transform: translate3d(-100%, 0, 0);
    -webkit-transition-delay: 0.1s;
    opacity: 0;
  }
  .ltr .view-animate.ng-enter.ng-enter-active {
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  .ltr .view-animate.ng-leave.ng-leave-active {
    -webkit-transform: translate3d(100%, 0, 0);
    opacity: 0;
  }
  /* End of View animations */

Upvotes: 1

Views: 1687

Answers (2)

Ben Bud
Ben Bud

Reputation: 16990

The flicker seems to be caused by z-index glitch.

Add the following css and it should be fixed:

    .view-animate.ng-leave {
        z-index: 1054;
    }
    .view-animate.ng-enter {
        z-index: 1053;
    }

It is still possible a flicker will still occur on refresh or the initial load. If you are defining ltr / rtl direction in app.run in the rootscope on $routeChangeStart, I suggest you prevent defining a direction when your current route is 'undefined'.

Upvotes: 2

CCH
CCH

Reputation: 1536

What you are looking for is the ngCloak directive.

The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.

More details here : http://docs.angularjs.org/api/ng/directive/ngCloak

Usage :

<div id="template1" ng-cloak>{{ 'hello' }}</div>

Upvotes: 0

Related Questions