css3 animation keyframes timing function is exclusive to chrome

After creating a preloader animation using CSS3, I noticed that it only functions properly on Chrome. On all other browsers, the animation works, but the timing for the middle bar is delayed, throwing off the entire animation. I'm puzzled because all the keyframes are meticulously set. Any ideas?

Here's the animation on Fiddle along with the code: http://jsfiddle.net/chevalier/ygo2ebxo/6/

HTML:

<div id="wrapper">
<div id="bar1gray">
    <div id="bar1gray_1" class="bar1red"></div>        
</div>
<div id="bar2gray">
    <div id="bar2gray_1" class="bar2red"></div>        
</div>
<div id="bar3gray">
    <div id="bar3gray_1" class="bar3red"></div>        
</div>

CSS:

    #wrapper {
    width:100px; 
    height:100px; 
    position:relative;
    margin:auto;
}
#bar1gray {
    width:57%; 
    height:15%; 
    background-color:#D2D3D5; 
    transform: skewX(-15.71deg);
    -webkit-transform: skewX(-15.71deg);
    -ms-transform: skewX(-15.71deg);
    margin-bottom:11px;
    position:absolute; top:16%; left:29%;
    overflow:hidden;
}

... (CSS code continues as provided)

tks! ;)

Answer №1

Here's a helpful suggestion for you to try out:
http://example.com/abcd123

Have you tested this solution across different browsers successfully?

If you're facing issues, consider removing the following line within the .bar2red class:

animation-delay:1.5s;

I hope this provided solution will aid you in resolving your problem.

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

Creating a Cancel Button in JSP/HTML/JS/CSS Form: A Step-by-Step Guide

It is necessary to incorporate the functionality of "save" and "cancel" in the JSP code for this particular form. By selecting "save", the data entered into the form will be submitted to its intended destination. Alternatively, choosing "cancel" will dismi ...

Tips for adjusting large resolution images to fit all screen sizes without exceeding the boundaries of the screen

I am in the process of creating a set of HTML pages specifically tailored for iPad Air and iPad Mini. These pages will feature several large images, with dimensions such as 1600x300. However, upon testing in Windows browsers, I encountered an issue where t ...

Reducing the width of the bootstrap table does not seem to work properly when trying

I am currently working on a bootstrap table design that features a table with a rowspan of "2" in the right corner, creating a layout with 2 rows on one end and another rowspan of "2" on the other end, as shown in the following image: https://i.sstatic.net ...

Unable to apply Login Form Css to HTML

Creating a Login Form <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Login Form</title> <link rel = "stylesheet" type="text/css" href="{{ ...

How can I fix the issue where Sx is not converting the styles to CSS format for the fill property exclusively?

The primary-main is supposed to change color to something like #abcdefg, but it seems to be stuck displaying primary-main as is. I am working with angular MUI + React https://i.sstatic.net/x07aI.png https://i.sstatic.net/8yuU3.png ...

The elements are stacked on top of each other, but unfortunately, the scroll

While scrolling the page, I encounter a small issue where the elements stack on top of each other. Additionally, when I perform a search, the elements move with the keyboard. I have attached screenshots to illustrate the problem. My goal is to have the cat ...

Convert the HTML content into a PDF while retaining the CSS styles using either JavaScript or Django

Looking to create a PDF of an HTML element with background color and images. Seeking a solution, either client-side or server-side using Django/Python. Tried jsPDF on the client side, but it does not support CSS. Considering ReportLab for Django, but uns ...

Ensure uniform column width for recurring rows in CSS grid, irrespective of content width

Is there a way to ensure that a CSS grid maintains the same width for repeating rows, even if the content in each cell varies in length? I am attempting to set column 1 to be 10% width, column 2 to be 45% width, and allocate the remaining space to column ...

Is there a way to encase numerous <tbody> elements together?

My table design has specific css requirements where I am using multiple <tbody> tags. It looks like this: Example with multiple tbody tags However, I also need a wrapper for the multiple tbody tags (similar to a common tbody parent) that can be scr ...

Dynamic addition of CSS classes to HTML elements using PHP

I'm working on developing an application that includes multiple courses. Each course is completed over a certain number of days, such as 14 days or 20 days. To visually track progress, I've implemented a step progress bar that looks like this:htt ...

Eliminate empty space in the table cell

I am working with a table that looks like this: <table> ... <td> <div class="btn-group btn-group-sm"> <button class="btn btn-info mini"><span class="glyphicon glyphicon-duplicate"></span></button&g ...

Element Style Does Not Align with Computed Z-Index

Currently, I am in the process of developing an HTML5 video player. However, I have encountered a problem where my custom controls become unclickable once the video element is set to fullscreen mode. This issue arises because the video's z-index is se ...

Ensure that the Bootstrap 5 modal and backdrop are sized to fit the parent container's width and height rather than filling the entire screen

Is there a way to limit the size of a Bootstrap 5 modal dialog and backdrop? The example below occupies 100% of the screen, can it be adjusted to cover only the parent main container? <main class="container-fluid pt-4 px-4" style="height ...

How to Implement Snap-Enabled Dragging in a Container Using jQuery UI

Issue Description (Fiddle): I am using the jQuery UI's .draggable() function to make the red element snap inside the blue container. However, it is snapping to one edge only instead of completely fitting inside (both edges). It requires further dragg ...

The functionality of the jQuery click event is not functioning properly

I encountered a strange issue where the code below works perfectly fine when directly pasted into the browser (chrome console). However, it does not work when executed from my source file. <script type="text/javascript" > $(".test").click( ...

Rotating Images in 3D with CSS

I am looking for guidance on how to create a rotating image effect on a webpage using CSS/JS. The image should rotate into the plane of the page, similar to the example shown in this post. Can you assist me with this? To better illustrate what I'm tr ...

What is the best way to assign a dynamic width to a block element?

In my project, I am working with 30 elements that have the class .lollipop and are styled with line-height: 30px; height: 30px;. <a class="lollipop">Random text</a> <a class="lollipop">Random text longer</a> <a class="lollipop"& ...

Troubleshoot mobile overflow-x problem when expanding div beyond container boundaries

Recently, I experimented with a method to extend the background-color of my div outside its container. Everything was working fine except for the fact that applying overflow-x to the body on mobile browsers didn't completely disable horizontal scrolli ...

Exploring the Differences in CSS Styling between Web and Mobile Platforms

Recently, I launched my new website and encountered a peculiar issue. Upon clicking on Pickup Date & Time, a bootstrap datepicker pops up like it should. However, the problem arises when viewing the website on mobile devices - the datepicker appears offsc ...

CSS for decorating an image with a border and transparent background

Struggling to add a border while converting a PSD to HTML? Is it possible to apply a border to an image with a transparent background? For instance, let's consider the following image: Imagine wanting to place a border around the caret in the image l ...