Troubleshooting CSS keyframe animation issues in IE and Edge

I have created an animation that works perfectly in all browsers except for IE and Edge. You can view the page here.

.progress-container {
  position: relative;
}

.background-progress-bar, .progress-bar {
  width: 100%;
  height: 10px;
  top: 0px;
  left: 0px;
  position: absolute;
}

.background-progress-bar {
  background-color: pink;
  z-index: 8;
}

.progress-bar { 
  background-color: red;
  z-index: 9;
}

.indeterminate {
  animation: indeterminate 2.5s infinite linear;
}

@keyframes indeterminate {
  0% {
    width: 30%;
    left: 0%;
  }
  25% {
    width: 50%;
    left: 50%;
  }
  50% {
    width: 10%;
    left: 0px;
  }
  75% {
    width: 30%;
    left: 0%;
  }
  100% {
    width: 0%;
    left: calc(100% - 5px);
  }
}

<div class="progress-container">
 <span class="background-progress-bar">
  <span class="progress-bar indeterminate"></span>
 </span>
</div>

IE and Edge are not applying the left property, causing the span to remain at the left. I have attempted using the -ms-animation property but it didn't resolve the issue.

Additionally, I have included this meta tag in my index.html file:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Answer №1

Update: It seems the issue stemmed from using calc() to determine the size of the left attribute, causing a bug in the code.

Update 2: I have filed a bug report specifically addressing this issue. For more details, you can refer to it here.

After struggling for hours, I discovered that the problem was actually a bug in IE-Edge. Tweaking the keyframes as shown below resolved the issue.

@keyframes indeterminate {
  0% {
    width: 30%;
    margin-left: 0%;
  }
  25% {
    width: 50%;
    margin-left: 50%;
  }
  50% {
    width: 10%;
    margin-left: 0px;
  }
  75% {
    width: 30%;
    margin-left: 0%;
  }
  100% {
    width: 0%;
    margin-left: 100%;
  }
}

For a functional example on IE-Edge, you can view it here.

It appears that these browsers struggle with applying left values on animations, so a quick fix is to switch left to margin-left to resolve the issue.

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

`Is it possible to animate the rotation of an image within an input control?`

After coming across this helpful answer, I successfully added a rotating GIF image as an icon inside an INPUT control on its right side. Simply applying the "busy" class to my control did the trick, and now it looks like it's in progress. input.busy { ...

Run a JavaScript function in 5 seconds

I'm looking to execute this function after a 5-second delay: $(document).ready(function() { $("#signInButton").trigger('click'); }); Your assistance is greatly appreciated. ...

What causes the image to not appear at the center bottom of the page when using IE for loading?

Why does the loading image not appear at the center bottom of the page in IE? This function loads content when the page is loaded and also loads content when scrolled to the bottom. When you load the page index.php, you will see the loading image at the ...

Switch the class on a specific div section

As you scroll to the top, a class named "blue" is added to the element with the ID of "div". However, when the scroll returns to the bottom, the "blue" class remains without being removed. Fiddle Link: http://jsfiddle.net/5d922roc $(window).scroll(fu ...

Implement the Bootstrap datetimepicker functionality for the specified div element

The date picker successfully functions when I assign the id to the input tag as shown below: <div class="col-sm-4" id="datepicker"> <input type="text" class="form-control" id="inputDate" placeholder="Date"> <span class="glyphicon gl ...

Troubleshooting a layoutUnit problem with Primefaces southern region

I'm encountering an issue with my PrimeFaces layout. The south layoutUnit is not displaying on the page, and I am unsure why. Below is the code for the page: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/ ...

Display a pop-up window upon clicking anywhere on the webpage using jQuery and HTML

Is it possible for me to create a pop-up window that opens a specific website when a user clicks anywhere on the page, similar to pop-up companies? Can this be achieved using HTML, JavaScript, and jQuery? Any help would be greatly appreciated. ...

Showcasing extensive text in a Bootstrap pop-up message

I'm having some trouble showing a lengthy text in a twitter bootstrap tooltip. As you can observe from the image below, it's not working perfectly. Is there an easy solution to handle text that is too long for the bootstrap tooltip? EDIT (includ ...

Dealing with challenges in integrating ngx-masonry with Angular 14

I am currently working with Angular 14 framework and the ngx-masonry library (https://www.npmjs.com/package/ngx-masonry/v/14.0.1). However, I am facing some issues where it is not functioning correctly. I would appreciate any assistance or guidance on how ...

Utilizing an Asterisk/Wildcard in the Name of a CSS Selector

Have you ever encountered an advanced CSS rule that utilizes an asterisk in the selector name? I am currently working with Bootstrap and have multiple divs nested within a parent div like this: <div class="example"> <div class="col-sm-1"> ...

Issue with negative z-index in modal window has not been resolved

I'm currently trying to customize the radio button using my own CSS styles, but I've encountered an issue. For some reason, setting the z-index to -1 is not working when the radio button is within a modal. Below is the code snippet that I am wor ...

Tips for toggling the visibility of a flexbox-styled popup using jQuery

I am trying to implement a popup on my website and I want to use flexbox styling for it. I have the necessary scss mixins for flexbox properties, however, I encountered an issue. The problem arises when I try to hide the popup using display: none, as the ...

Tips for updating the date format in Material UI components and input fields

Is there a way to customize the date format in Material UI for input text fields? I am struggling to format a textField with type 'date' to display as 'DD/MM/YYYY'. The available options for formatting seem limited. It would be helpful ...

CSS fluid layout with three columns

I am attempting to create a 3-column layout where each column has a fluid width of 33% and height of 50%. However, when I add padding to the columns, it causes the last div to move to the next line. How can I resolve this issue? Example HTML: <div id= ...

Gathering Servlet details from non-form elements

I am currently in the process of developing an application that is capable of parsing JSON strings. At this stage, I am able to input a JSON string using Java, write it to an HTML document, and then have a JavaScript program read and parse it before ultima ...

The MinWidth property in ColumnDefinition is not functioning as expected

Currently, I am encountering an unusual issue while using a Grid in WPF (XAML) and setting the MinWidth property in a ColumnDefinition. When I have 9 ColumnDefinitions with 'Width="*"' specified for each one, and then apply the MinWidth property ...

Using Svelte to effectively connect to a specified object within an array

Check out this code snippet: <script> let data = [ {id: 1, first: "x"}, {id: 2, second: "y"} ]; </script> <input type="text" bind:value={data.first}/> If you modify the value in the input field and ...

How can I stop the body from scrolling to 100% height when the virtual keyboard is displayed?

My chat app has sticky header and footer elements. To handle the mobile virtual keyboard opening, I adjust the document's height using window.visualViewport.height. For example, if the browser's height is 1000px and the virtual keyboard takes up ...

Launch the sidebar window using jQuery

I've been attempting to create something similar to this. However, I'm having trouble replicating it exactly. What I've attempted I've managed to create a replica, but the issue is that the buttons are fixed. Could setting the left ...

Opening the Instagram app in Instagram's built-in browser

<a href="instagram://user?username=someuser">Open Instagram</a> Works fine on Google Chrome on my Android phone. However, it does not work from Instagram's in-app browser. I keep getting a 'Page can't be loaded' error messa ...