1.2.0-rc2 flicker on iOS7 when changing css class

[tanx]

Hi. When changing the class of a list item after an ngTouch event, the list item flickers. The class is changed depending on the state of $scope.selected with ngClass.

[petebacondarwin]

Does it work correctly on RC1? What about latest snapshot: http://code.angularjs.org/snapshot/angular.js?

[tanx]

I tested it on RC1, RC2 and with the current master three days ago. See here: #3959 (comment)

[nigelsmith]

I'm seeing a flicker and partial completion of an animation with rc2, ios7 and ng-include - a 3D transform flickers and then the partial template snaps into view.

[matsko]

@tanx can you please provide a plunkr example? A fix for ngRepeat (speeding it up) is in progress and I want to get an idea about what's going on here to see if we speed this up as well.

[matsko]

@tanx can you test using these AngularJS files:
#4011 (comment)

[tanx]

Thanks. I tried, but the list items don't render properly with that angular build.

The example is very basic. I'm trying to change to css class of a list item like so:

<li ng-class="{'mail-list-active': email === selected}" ng-click="select(email)" ng-repeat="email in emails">

It works fine in chrome on desktop, but on iOS the li flickers when changing the css class. I also use the 'ngTouch' module here. Hope this helps.

[matsko]

Please test this link and let me know if anything flickers (goto "Three" to see your code in use): https://s3.amazonaws.com/angularjs-dev/ios-7-flicker/example/animate.html

I tested them out on an IPhone 4s running iOS7 on both Safari and Chrome.

[tanx]

Thanks. Your example does not flicker in my Test.

Are you using ngTouch?

[tanx]

I tried to test your build again in my app. But the list items don't render when I create the list items dynamically by setting

$scope.emails = createDummyMails();

In the controller.

[tanx]

Btw, why do you assume this bug is caused by ngAnimate? I don't use ngAnimate in my code at all.

[matsko]

My mistake. I assumed so since this was assigned to me and I usually take care of the ngAnimate stuff. Also ngClass was recently "modified" past 1.2rc1 to be ngAnimate-aware and there were some flicker-related bugs at first. Not to worry however, I'm looking into this anyway.

[matsko]

@tanx ... @btford is taking this one over.

[btford]

Is this related to these issues described on Stack Overflow?

• http://stackoverflow.com/questions/17173723/how-to-solve-flicker-on-ipad-when-event-delegation-is-used
• http://stackoverflow.com/questions/3516173/ipad-safari-how-to-disable-the-quick-blinking-effect-when-a-link-has-been-hit

I tried changing these CSS properties to no avail. I've made a plunker that seems to show the issue: http://plnkr.co/edit/bMrwvnw2KA8vTvhbKbJp?p=preview

I noticed that you see the flicker when angular-touch.js is loaded, but regardless of whether ngTouch is added as a dependency.

I also need to check if this is an issue when jQuery is loaded.

Is this what you're seeing @tanx?

[btford]

This is a Safari thing.

Just use:

      * {
        -webkit-tap-highlight-color: transparent !important;
      }