Issue with custom Javascript not executing in Internet Explorer versions 9 and 10

Initially, this script is found in the document's head section.

<script>
    document.addEventListener("DOMContentLoaded", function () {
        var e, t = document.querySelectorAll("div.bounceInDown");
        for (var n = 0, r = t.length; n < r; n++) {
            e = Math.round(Math.random() * 7e3) + "ms";
            t[n].style.animationDelay = e;
            t[n].style.WebkitAnimationDelay = e
        }
    }, false)
</script>

I have a custom class named "bounceInDown" that defines a keyframe animation. All div elements with this class should bounce downward upon page load. The script assigns random delays to each element for a unique effect. However, the animation does not work when using Internet Explorer. What could be causing this issue?

This functionality is supported on all browsers except IE.

Answer №1

One thing to note is that IE9 does not have support for animation - this feature was only introduced in IE10.

Another possibility is that the animation may be starting before the DOMContentLoaded event has finished updating the delay. Instead of setting the animation in CSS and adjusting the delay in JS, consider setting the entire animation in JS:

t[n].style.animation = "yourAnimationName 1s "+e;

(Make sure to replace the 1s with your desired animation duration)

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

Activate Google Map marker through an external click

I need help with implementing anchor buttons for different locations that highlight the location details on click. For example, when clicking on "location1" button, I want to highlight location1 on Google Maps. Check out the demo on JSFiddle google.maps.e ...

Unexpected problem with redrawing HTML application in Android WebView

I created a basic nixie clock app using HTML and wrapped it in a WebView for use on Android. It consists of one HTML file, a JS file, a CSS file, and ten digit images. After a few hours, I noticed stripes appearing in the center of the screen where the an ...

Utilizing material-ui textfield involves a delay when the input is being focused

Is there a way to trigger inputRef.current.focus() without relying on setTimeout? It seems like the focus is not working as expected in React or MaterialUI. For a demonstration, visit: https://codesandbox.io/s/goofy-gareth-lkmq3?file=/src/App.js export de ...

Rotational orientation of a progress circle image in SVG

I am currently working on developing a circular progress bar, similar to the one shown in the image below. The progress of this bar is determined by percentages and it moves around the circle accordingly. I have managed to get the progression moving, b ...

What are some of the methods that can be used with the Facebook API to interact with the Like button

I am working on developing a JavaScript script that will automatically click on all the LIKE buttons for posts loaded on Facebook in the Chrome browser. Input: "" Or any other FB page,Groups,Profiles Step1: I will scroll down to load all the posts S ...

Pop-up website opening with fixed dimensions error

On my webpage, I have a terminal where you can type commands and receive output. For example, typing "/unsolvedproblems" displays a list of unsolved problems with a hyperlink. I've been trying to make the hyperlink open in a popup window with a fixed ...

Utilize an A-frame conditional statement to check a variable and dynamically display various glTF models depending on its value

Is it possible to use JavaScript and A-frame () to create a scenario like this? I want to have an onload function named load() that will evaluate the value of variable x. If x is equal to one, I want the gltf with the ID of 1 to be visible while hiding th ...

One way to enhance user experience is by passing parameters dynamically from the database when an element is clicked. This allows for the retrieval of

Earlier, I tried to post a question but couldn't get it working due to incorrect code. As the title suggests, my objective is to retrieve data from a database and display it in a div. The idea is that when this data is clicked, it should be passed to ...

"Exploring the power of NodeJS with createServer, dealing with

Can instances of global.request potentially collide in this NodeJS scenario? I have a basic web server set up in NodeJS where I am globally exposing the request that is created: http.createServer(function(req, res) { global.request = req; // do ...

Avoid having Masonry load all divs simultaneously

I have experience using jQuery Masonry on Tumblr, but now I want to incorporate it into my portfolio website for displaying my photography. However, I'm struggling to find a solution that allows sets of images to load in as the user scrolls to the bot ...

What is the best way to reference a div link from a different PHP file?

Struggling to access a page div from another php file, I've tried calling it using (found online) admin.php#changepass Here's an example of my HTML code: <div id="changepass" class="w3-container city" style="display:none"> <form name ...

Align an image in the center of a div without using absolute positioning

I'm currently facing an issue where I need to align an image at the center of a div without using absolute positioning. This is necessary because the image spills over into any adjacent divs on the page. Specifically, I have a previous div containing ...

The Element fails to go back to its original position due to CSS Float

After changing the screen resolution, it appears that the nav-search-ul element fails to return to its correct position. It seems like the media query is not working properly. This issue only occurs in Chrome, as everything works fine in Firefox and IE. ...

Ways to increase the font size of input text using bootstrap's css framework

I currently have a bootstrap textbox set up like this: <input type="text" class="span9" required name="input_text"/> My goal is to increase the height of my input box to 300px. The width, on the other hand, is being handled by span9. I utilized In ...

Enhance your Django website with the powerful jQuery Datatables plugin

I am relatively new to using django and I have integrated jquery datatable plugins into my django application. Currently, these datatables are functioning well with small datasets retrieved from my view. However, I am facing challenges when trying to displ ...

Tips for Passing Parameters to Vuex mapActions correctly:Executing mapActions in Vuex requires a specific

I am facing an issue with my ProjectPage.vue where I display project issues in a v-data-table. The projects are fetched from a server API call in the sidebar and displayed there. Once I select a project, I want to use its id to retrieve its corresponding i ...

What could be causing the Bootstrap icon to remain the same size without changing?

Take a look at this piece of code: <div class = "banner-image w-100 vh-100 d-flex justify-content-center align-items- center"> <div class = "content text-center"> <i class="bi-chevron-compact-down bi-7x"&g ...

Cannot retrieve Global variables when using chrome.tabs.executescript in Chrome 55

After recently updating Chrome to version 55.0.2883.75, I encountered an issue with my self-developed Chrome Plugin used for parsing HTML files. In the plugin, I utilize chrome.tabs.executescript to retrieve data from a background HTML page. Previously, I ...

Updates made to CSS are not appearing on the Joomla site

My website is based on Joomla and has been functioning well since it was created. However, recently I have noticed that any CSS changes made in the files are not showing up on the site. I have tried clearing the cache and viewing it from different ISPs, ...

How to retrieve specific items from an array contained within an array of objects using Express.js and MongoDB

Within the users array, there is an array of friends. I am looking to retrieve all friends of a specific user based on their email where the approved field is set to true. In my Node.js application, I have defined a user schema in MongoDB: const UserSchem ...