Firefox animation causes text to flash intermittently

I am looking to create a slide animation using CSS and AngularJS. I have made progress with this example: JSFiddle. The animation works smoothly on Chrome, but on Firefox, the text shakes and flickers slightly during the animation. I am struggling to pinpoint the exact issue. Any suggestions?

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);

}]);

Answer №1

After experiencing a text flickering problem on Firefox caused by transforms, I discovered that adding

backface-visibility: hidden;

to the affected element resolved the issue successfully.

Answer №2

To resolve the issue, I implemented the following solution:

will-change: transform;

This was applied to the element undergoing transformation.

This serves as a hint to the browser, indicating the anticipated changes the author plans to make to the element.

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

For further details, refer to the MDN documentation (link).

Important: (from the MDN documentation): will-change should only be used as a final measure to address existing performance issues, not as a preemptive measure for potential problems.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Applying a CSS style to a division element

Can I modify the style attribute of a div element using JavaScript? <div style="color:#0000FF"> <h3>This is a heading</h3> <p>This is a paragraph.</p> </div> I am interested in achieving the following: Changing th ...

Is it possible to blend HTML and Jade routes in a single project?

I am interested in setting up an application where I can incorporate a mix of both HTML and Jade. While I don't have anything against Jade, I prefer working with HTML for building applications involving Angular and Node APIs. As I am currently learnin ...

Retrieving custom attribute values during a drop event in Jquery drag and drop operations

I'm currently working on a moodboard creator, but I've hit a snag while trying to transfer the values from custom attributes of an image to a new div once the drop action is completed. Every time the drop is finished, it always fetches the value ...

Tips on avoiding blurring when making an autocomplete selection

I am currently working on a project to develop an asset tracker that showcases assets in a table format. One of the features I am implementing is the ability for users to check out assets and have an input field populated with the name of the person author ...

Creating an image gallery with animated effects: A step-by-step guide

I am looking to develop a creative image gallery with animated effects. I also want to include panels and hyperlinks for each image, similar to the functionality on this website: http://www.microsoft.com/en-lk/default.aspx Can anyone guide me on how to ac ...

The new FormData(form) method unexpectedly returns an empty object

In this scenario, I am aiming to retrieve key-value pairs. The form on my page looks like this: <form id="myForm" name="myForm"> <label for="username">Enter name:</label> <input type="text" id="username" name="username"> ...

What is the process for implementing a banner across the entire website?

I understand that this question resembles one found at this link, but I did not find a clear solution there. Currently, I am utilizing <?php include "banner.html"; ?>. However, in order for this method to work, I must change the extension of ALL page ...

Leverage the power of Twitter API by integrating it with Laravel and AngularJS using

Hey there! I recently developed an app that successfully integrates Twitter log in functionality using AngularJS for the front end and Laravel for the back end with the help of Satellizer library. However, I am now looking to access the Twitter Rest API ...

Utilizing JavaScript Files Instead of NPM as a Library for Open Layers: A Step-by-Step Guide

I've been attempting to get Open Layers to function in my Eclipse web development environment, but I've encountered some challenges along the way. The setup instructions provided on the Open Layers website focus mainly on using npm. Nevertheless, ...

Error Panel Style Message Format:

Currently, I am utilizing PrimeFaces, which utilizes JQuery UI not just for its functionality but also for its CSS styling framework. The issue I am facing stems from my lack of understanding about the CSS framework, as I have been unable to locate any exa ...

Using Javascript within an HTML document may not provide the intended functionality

My script: <!DOCTYPE html> <html> <head> <script> $(document).ready(function () { document.getElementById("saveForm").click(); }); </script> </head> <!--<body onload="document.getElementById('saveForm&apos ...

Is OpenLayers + Ajax causing issues or errors?

Utilizing the code provided below to showcase an OpenLayers map within a DIV container presents a peculiar issue. Upon initial load of the webpage, the map does not display consistently - requiring multiple page refreshes in order for it to become visible. ...

Accessing html form elements using jQuery

I'm having trouble extracting a form using jQuery and haven't been able to find a solution. I've tried several examples, but none of them display the form tags along with their attributes. Here is a sample fiddle that I've created: Sam ...

Is it possible to navigate to the Next page using a different button instead of the pagination controls

Is it possible to navigate to the next page upon clicking a button labeled "Press me"? Here is the code snippet: <!doctype html> <html ng-app="plunker"> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/an ...

variable scope updates on its initial occurrence

I'm encountering a weird issue with my AngularJS stopwatch. The code I'm using to update the timer is as follows: $scope.seconds = $scope.minutes = $scope.hours = "00"; $scope.timer = { h: 0, m: 0, s: 0 }; $scope.runTimer = functio ...

Could you explain the distinction between push and offset within the grid system?

I'm currently diving into the world of Bootstrap grids and trying to wrap my head around the concepts of push and offset. In the showcase below, I have two rows that only differ in how the third column is positioned - one using a push and the other an ...

CSS/React JS: I wish for the input fields to maintain focus even after entering values

I'm working with a confirmation code that is made up of 6 digits. I've noticed that when I click on an input field, it becomes focused and underlined in blue. However, as soon as I start typing in the next input field, the blue underline disappe ...

Tips for creating two interchangeable lists and saving the selected items when the selection process is finished

Utilizing jQuery and specifying dual selectors together, I attempt to reference each variable in the following code: UL_HeadersToOmit - represents the list to select from UL_dropedCols - indicates the list to be passed as a reference to the subsequent fu ...

Tips for extracting innerHTML or sub-string from all elements that have a specific class name using JavaScript

When it comes to shortening the innerHTML of an element by its Id, I have found success using either slice or substring. While I'm not entirely clear on the differences between the two methods, both accomplish what I need them to do. The code snippet ...

Can anyone explain why my navbar text is not aligning in the center?

I am struggling to center the text in one of my two navbars. As a newcomer to both navbars and bootstrap, I am having difficulty figuring out why I can't achieve this. Should I be making changes on the bootstrap side or can it be fixed within the < ...