CODEWITHSUNDEEP
htmlcssangularjs
BhagyashriK
BhagyashriK

Reputation: 525

Text flickers during animation on firefox

I want to do slide animation using CSS and Angular Js. I am upto this :JSFiddle On chrome this animation works flawless. But on Firefox text shakes and flickers little bit when animation goes on.I am not able to figure out exact issue . Any idea ..

Code :

HTML:

<div ng-controller="animationCtrl">
  <ul class='list'>
    <li>
        <div class="slide-animation">
            <div class="slide-animation-wrap new-slide-wrap {{cssTimeInfo1}}"> <span class="text">{{valueSet1[0]}}</span>

                <label class="small-label">{{valueSet2[1]}}</label>
            </div>
            <div class="slide-animation-wrap old-slide-wrap {{cssTimeInfo1}}"> <span class="text">{{valueSet1[1]}}</span>

                <label class="small-label">{{valueSet2[1]}}</label>
            </div>
        </div>
    </li>
   </ul>
</div>

CSS :

.list > li {
  box-sizing:border-box;  
  height: 72px;
  display: inline-block;
  margin-right: 1.06%;
  padding: 15px;
  vertical-align: top;
  background-color: #f1f1f1;
  -webkit-box-shadow: 0 0 7px rgba(210, 210, 210, 0.3) inset;
  box-shadow: 0 0 7px rgba(210, 210, 210, 0.3) inset;
}

.small-label {
  height: 24px;
  display: block;
  font-size: 0.714em;
  margin-bottom: 0;
  color: #999999;
  text-transform: uppercase;
  text-align: center;
}
.text {
  height: 24px;
  display: block;
  font-size: 1.286em;
  margin-bottom: 3px;
  color: #666666;
  text-align: center;
}



/* Slide animation */
.slide-animation {
  overflow: hidden;
  position: relative;
  height: 40px;
}
.slide-animation-wrap {
  position: relative;
  width: 100%;
}
.slide-animation-wrap.new-slide-wrap {
  top: -45px;
}
.slide-animation-wrap.old-slide-wrap {
  top: -51px;
}
.slide-animation-wrap.slide-in-animation,
.slide-animation-wrap.slide-out-animation {
  -webkit-animation: slide-outside-animation 1s linear forwards;
  -o-animation: slide-outside-animation 1s linear forwards;
  animation: slide-outside-animation 1s linear forwards;
}
.slide-animation-wrap:before,
.slide-animation-wrap:after {
  content: " ";
  display: table;
}
.slide-animation-wrap:after {
  clear: both;
}
.slide-animation-wrap:before,
.slide-animation-wrap:after {
  content: " ";
  display: table;
}
.slide-animation-wrap:after {
  clear: both;
}
@-webkit-keyframes slide-outside-animation {
  0% {
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
  }
  100% {
    -webkit-transform: translateY(45px);
    -ms-transform: translateY(45px);
    transform: translateY(45px);
  }
}
@-moz-keyframes slide-outside-animation {
  0% {
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
  }
  100% {
    -webkit-transform: translateY(45px);
    -ms-transform: translateY(45px);
    transform: translateY(45px);
  }
}
@-ms-keyframes slide-outside-animation {
  0% {
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
  }
  100% {
    -webkit-transform: translateY(45px);
    -ms-transform: translateY(45px);
    transform: translateY(45px);
  }
}
@keyframes slide-outside-animation {
  0% {
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
  }
  100% {
    -webkit-transform: translateY(45px);
    -ms-transform: translateY(45px);
    transform: translateY(45px);
  }
}

Angular :

var myApp = angular.module('myApp',[]);
myApp.controller('animationCtrl', ['$scope','$interval', function ($scope,$interval) {
    $scope.valueSet1=['HGFhgfsffghfhgf','HGFhgfsffghfhgf'];
    $scope.valueSet2=['ABC','ABC'];
    $scope.cssTimeInfo1 = "display-none";
    $scope.cssTimeInfo2 = "display-none";
    var flag=0;
    $interval(function(){
        //0
        $scope.cssTimeInfo1='slide-in-animation';
        $scope.cssTimeInfo2 = "display-none";
        flag++;
       if(flag>1){
           flag=0;
           //0

           $scope.cssTimeInfo1 = " ";
           $scope.cssTimeInfo2 = " ";

       }
        else{
           //1

           $scope.cssTimeInfo1 = "slide-out-animation";
           $scope.cssTimeInfo2 = "slide-in-animation";
       }
    },1000);

}]);

Upvotes: 0

Views: 1195

Answers (2)

Aleksandar
Aleksandar

Reputation: 4154

I fixed the issue by adding:

will-change: transform;

on the element being transformed.

Provides a rendering hint to the user agent, stating what kinds of changes the author expects to perform on the element.

(Firefox 36, Safari 9, Chrome 36, Opera 24)

See MDN reference (link) for more information.

Note (from the MDN reference): will-change is intended to be used as a last resort, in order to try to deal with existing performance problems. It should not be used to anticipate performance problems.

Upvotes: 0

sdjn
sdjn

Reputation: 73

I had a text flickering issue on Firefox with transforms. Adding

backface-visibility: hidden;

to the transformed element fixed the issue for me.

Upvotes: 1

Related Questions