"Troubleshooting a Animation Problem in the Latest Version of

I have discovered an issue with animations on the latest version of Firefox Quantum.

Upon loading a page with certain animated elements set to display: none;, when a script changes it to .display = "block";, some parts of the animation may be missed or not fully displayed at the beginning, especially if it's longer than a few seconds.

Check out the example in the code snippet below:

var anims = document.getElementsByClassName("anim"),
    time = document.getElementById("time"),
    interval = null;

function animate() {
  for (var i = 0; i < anims.length; i++)
    anims[i].style.display = "block";
}

function timer(sec) {
  time.textContent = sec--;
  interval = setInterval(function () {
    time.textContent = sec >= 0 ? sec-- : clearInterval(interval) || "";
  }, 1000);
}

// Trigger animation immediately after click
button0.addEventListener("click", animate);

// Trigger animation one second after click
button1.addEventListener("click", function () {
  timer(1);
  setTimeout(animate, 1000);
});

// Trigger animation two seconds after click
button2.addEventListener("click", function () {
  timer(2);
  setTimeout(animate, 2000);
});

// Trigger animation three seconds after click
button3.addEventListener("click", function () {
  timer(3);
  setTimeout(animate, 3000);
});

// Hide the divs
reset.addEventListener("click", function () {
  for (var i = 0; i < anims.length; i++)
    anims[i].style.display = "none";
});
body {
  font-family: arial;
}

body > div {
  margin-bottom: 10px;
}

#result {
  background-color: #e5f3ff;
  height: 120px;
  padding: 10px;
}

.anim {
  display: none;
  float: left;
  margin: 10px;
  width: 50px;
  height: 50px;
  border-radius: 5px;
  animation: animate 1.5s;
}

#anim1 {
  background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
  
  /* Only one iteration iteration (default) */
  /* This one will not be animated */
}

#anim2 {
  background-color: #fddb92;
  animation-iteration-count: 3; 
  
  /* Three iterations */
  /* Only one iteration will be seen */
}

#anim3 {
  background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
  animation-iteration-count: infinite; 
  
  /* Infinite */
  /* No apparent issue */
}

@keyframes animate {
  50% {
    transform: translate(80%, 100%) rotate(-360deg);
  }
}
<div>
  <span><strong>Reload the snippet</strong>
  before clicking another button for viewing the issue
  <br/><strong>Or,</strong>
  <em>Reset</em> (display: "none") before clicking a button to view with no issue: </span>
</div>

<div>
  <button id="button0">On click</button>
  <button id="button1">1 sec timeout</button>
  <button id="button2">2 sec timeout</button>
  <button id="button3">3 sec timeout</button>
  <button id="reset">Reset</button>
  <span id="time"></span>
</div>

<div id="result">
  <div id="anim1" class="anim"></div>
  <div id="anim2" class="anim"></div>
  <div id="anim3" class="anim"></div>
</div>

Upon closer inspection, you'll notice that the infinite animation seems unaffected, while the other two clearly experience issues.

So, what's the solution to this problem?

Important:

  • To witness this problem, make sure you are using Firefox Quantum.
  • I have tested the same code snippet on Google Chrome and everything seems to be functioning correctly.

Answer №1

After thorough testing, I am confident that the issue is resolved for all browsers by utilizing classes. While there are other approaches to solving this problem, encapsulating the animation within a new class that is only applied after the button click seems to be the most effective solution.

Within the CSS, I restructured the animation property into a new class that also includes the block display style.

.anim-start {
  display: block;
  animation: animate 1.5s;
}

In the JavaScript, I simply replaced style.display='block' with

anims[i].classList.add('anim-start');

Check it out here: https://jsfiddle.net/0mgqd2ko/1/

By adopting this method of introducing a new class, the process becomes more streamlined. For instance, transitioning from opacity 0 to 1 becomes easier when not starting from display none. Additionally, using visibility allows the elements to still occupy space if needed.

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

Transferring information from a method within a controller to a method within a directive using Angular

I am facing an issue in my Angular application where the data retrieved from an API is not being passed properly from a controller function to a directive function. Despite using .then() to ensure sequential execution, I still receive 'undefined' ...

Switch up the appearance of a document by manipulating the stylesheet using a select tag

I'm currently facing an issue with the implementation of a drop-down box on my website for selecting different themes. Despite having the necessary javascript code, I am unable to get it working correctly. Here's the snippet: //selecting the sele ...

What is the best way to initiate a new animation from the current position?

Here is my custom box: <div class="customBox"></div> It features a unique animation: .customBox{ animation:right 5s; animation-fill-mode:forwards; padding:50px; width:0px; height:0px; display:block; background-color:bla ...

Learn how to incorporate objects into the state of your Redux React application with my example

I am dealing with an issue in my Redux store where I am trying to add an object to an array. I need to verify if any element in the array shares the same id as the id in the payload - if not, I want to push the object to the array. The initial state of t ...

Tips for maintaining a loading screen for longer than 4 seconds?

I want to maintain the loading screen for a minimum of 4 seconds. However, the timer at the end does not seem to be functioning as expected. Here is the code snippet I am using: window.addEventListener("load", () => { const preload = document.querySe ...

What is the best way to select a clicked span element within a div using JQuery and then adjust the spans before and after it

<div> <span>A</span> <span>B</span> <span>C</span> <span>D</span> </div> If a user clicks on one of the spans within the div, I want to apply styles (such as text color) to that span and all prec ...

Execute the getJSON calls in a loop for a count exceeding 100, and trigger another function once all

In order to process a large grid of data, I need to read it and then make a call to a $getJSON URL. This grid can contain over 100 lines of data. The $getJSON function returns a list of values separated by commas, which I add to an array. After the loop fi ...

Is there a way to convert the existing JavaScript code for a hyperlink so that it can be triggered by clicking a button instead?

I have a JavaScript code that works well when the hyperlink below is clicked: <a href="delete_event.php?event_id=110" onClick="return ConfirmDelete()" class="list-group-item">Delete Event</a> <script> function ConfirmDelete() { var ans ...

I'm having trouble with my Express server routes not being accessed. The browser is displaying an error message saying 'No Data Received ERR_EMPTY_RESPONSE

I've encountered an issue with my express server while setting up an email service. Despite troubleshooting and simplifying the code to a basic 'hello world' example, the problem persists. No routes are functioning properly – requests made ...

Persistent Footer while scrolling on Internet Explorer

Trying to achieve a consistent look across Chrome, IE(11), and FF for my responsive website has been a challenge. The main issue I'm facing in IE is that when the site's content extends beyond the viewport, the scrollbar fails to reach the end d ...

The post() method in Express JS is functioning flawlessly in Firebase cloud function after deployment, however, it seems to encounter issues when running on a

https://i.stack.imgur.com/bIbOD.pngI am facing an issue with my Express JS application. Despite having both post() and get() requests, the post() request is not working on my local machine. It keeps throwing a 404 error with the message "Cannot POST / ...

Various image dimensions cause divs to shift unevenly

Here is the current setup: <div class="row"> <div class="col-md-4 content-column"> <img class="btn-center btn-desktop" src="images/buttons/btn-desktop.svg" alt="desktop button"> <h2 class="btn-deskt ...

Building a web proxy with node.js and express

I'm currently in the process of designing a personalized web proxy using JavaScript to allow users to surf the internet through a designated website, similar to this . One challenge I encountered is transferring the response from a URL back to the us ...

The error message InvalidCharacterError is displayed when the attempt to create a new element using the 'createElement' method on the 'Document' object fails. This is due to the tag name provided ('/static/media/tab1.fab25bc3.png') not being a valid name

Hey everyone! I'm new to using React and I decided to try cloning Netflix by following a tutorial on YouTube. However, I've encountered an issue with rendering an image in a functional component. The error message I'm receiving is as follow ...

AngularJS Treeview with Vertical Line Styling using CSS

Struggling with styling, I am attempting to create a tree view in AngularJS. Currently, I am facing an issue aligning vertical and horizontal lines for the tree items. Check out my Codepen for reference. <html lang="en"> <head> <meta cha ...

Ensuring website responsiveness beyond just the carousel

I found a carousel (inspired by: https://codepen.io/dobladov/pen/kXAXJx) that fetches images from an API. The carousel will switch images as you click on a different image or use the "previous" or "next" buttons. While there are many examples of putting te ...

Merge two arrays by matching their corresponding identifiers

I have 2 separate arrays that I need to merge. The first array looks like this: const Dogs[] = [ { id: '1', name: 'Buddy' }, { id: '2', name: 'Max' }, ] The second one: const dogAges[] = [ { id: '4&ap ...

Comparing `height: calc(100vh);` to `height: 100vh;` in CSS can reveal a few

Currently tackling a project where the previous developer utilized: .main-sidebar { height: calc(100vh); } Unfortunately, I can no longer reach out to them, and I am curious about the variance (if any) between the two approaches. (Am I in the approp ...

Mastering the art of creating an authentic carbon fiber CSS background

Authentic carbon fiber consists of a series of interconnected grey fibers that resemble woven sheets in grey color. Does anyone have knowledge on how to replicate this pattern using CSS? The examples created by Lea Verou do not accurately depict true carb ...

What is the best way to combine two vertex positions using a distance-based blending technique relative to the camera's position?

My goal is to achieve a smooth transition between two different vertex positions based on the distance from the camera. Specifically, I aim to create a visual effect that seamlessly shifts between a horizontal plane near the camera and a vertical plane in ...