Circle blinks before 'updateProgress' on Lollipop

[aroncal]

Every time updateProgress function gets called when changing $scope.downloaded value on the controller, the filled part of the circle blinks before growing. This happens on a Nexus 5 with Android Lollipop 5.0, but doesn't happen on a Galaxy S3 Android Jelly Bean 4.3.

After some research, i changed the method in orbicular.js to use hardware acceleration:

Before:

// Set the rotation of the square
updateProgress = function (circles, fix, pos) {
 circles.css({
  '-webkit-transform': rotate(' + pos + 'deg)',
  '-moz-transform': 'rotate(' + pos + 'deg)',
  '-ms-transform': 'rotate(' + pos + 'deg)',
  '-o-transform': 'rotate(' + pos + 'deg)',
  'transform': 'rotate(' + pos + 'deg)'
 });
 pos = pos * 2;
 fix.css({
  '-webkit-transform': rotate(' + pos + 'deg)',
  '-moz-transform': 'rotate(' + pos + 'deg)',
  '-ms-transform': 'rotate(' + pos + 'deg)',
  '-o-transform': 'rotate(' + pos + 'deg)',
  'transform': 'rotate(' + pos + 'deg)'
 });
};

After:

// Set the rotation of the square
updateProgress = function (circles, fix, pos) {
 circles.css({
  '-webkit-transform': 'translate3d(0, 0, 0) rotate(' + pos + 'deg)',
  '-moz-transform': 'translate3d(0, 0, 0) rotate(' + pos + 'deg)',
  '-ms-transform': 'translate3d(0, 0, 0) rotate(' + pos + 'deg)',
  '-o-transform': 'translate3d(0, 0, 0) rotate(' + pos + 'deg)',
  'transform': 'translate3d(0, 0, 0) rotate(' + pos + 'deg)'
 });
 pos = pos * 2;
 fix.css({
  '-webkit-transform': 'translate3d(0, 0, 0) rotate(' + pos + 'deg)',
  '-moz-transform': 'translate3d(0, 0, 0) rotate(' + pos + 'deg)',
  '-ms-transform': 'translate3d(0, 0, 0) rotate(' + pos + 'deg)',
  '-o-transform': 'translate3d(0, 0, 0) rotate(' + pos + 'deg)',
  'transform': 'translate3d(0, 0, 0) rotate(' + pos + 'deg)'
 });
};

Now it seems to have stopped blinking on both devices.

[stakach]

I seem to be implementing more and more workarounds for chrome these days. LGTM. I'll update the release now.

[stakach]

Actually it might be better to use CSS to trigger the same effect. Would you be able to test adding

-webkit-backface-visibility: hidden;
backface-visibility: hidden;

to the div.co-circle elements?

[stakach]

Just released v3.2.0 Let me know if it resolves this issue - I don't have a lollipop device

[aroncal]

Nice! the fix on v3.2.0 works fine :clap: