The CSS animation of a pseudo element functions properly in Chrome and IE, but remains static in Safari and Firefox unless the "position: absolute" property is added

Here's the HTML snippet:

<div class="icon-spinner"> test 1</div>
<div class="parent">
    <div class="icon-spinner nonchrome"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; test 2</div>
</div>

And this is the accompanying CSS code:

.icon-spinner:before{
    animation: spin 0.5s infinite linear;
    -webkit-animation: spin 0.5s infinite linear;
    content:"O";
    font-size: 30px;
}

.parent {
    position: relative;
}

.icon-spinner.nonchrome:before{
    position: absolute;
}

@keyframes spin {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

@-webkit-keyframes spin {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}

You can view the demonstration in this jsfiddle link. The spinning "O" next to "Test 1" works correctly in Chrome 39 and IE 10/11, but remains stationary in Safari 8 and Firefox 34. The spinning effect on "test 2" displays correctly in all browsers, although it appears off-center in Firefox.

Despite Safari reportedly lacking support for CSS animations on pseudo-elements, setting "position: absolute" seems to resolve the spinning issue for "test 2." However, why does the spin fail to work on "test 1" in Firefox? Isn't Firefox supposed to have good support for pseudo-element animations?

Although the spin on "test 2" performs well across different browsers, how can I adjust it to ensure proper alignment in Firefox? It functions smoothly but off-centered on MacOS, while on Windows, it tends to be centered better but exhibits noticeable jitteriness.

Moreover, notice the multiple non-breaking spaces within the "test 2" HTML to avoid interference with the animation (which happens automatically in "test 1"). Is there a way to eliminate the necessity for these spaces, if feasible?

Answer №1

Link to JSFiddle

icon-spinner:before{
    animation: spin 0.5s infinite linear;
    -webkit-animation: spin 0.5s infinite linear;
    content:"O";
    font-size: 30px;
    height: 30px;
    display:inline-block;
}

.parent {
    position: relative;
}

@keyframes spin {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

@-webkit-keyframes spin {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}

In attempting to address some browser compatibility issues regarding the spinning 'O' element, it seems that adjusting the size and positioning within different browsers is key. By setting specific properties such as display: inline-block for Safari and explicitly defining height for Firefox, we can achieve a more consistent center rotation. It may also be beneficial to set an exact transform-origin property to ensure the rotation remains centered regardless of the browser's interpretation of the font size.

Answer №2

To solve the issue of the off-center spinning element, just add this single line of code:

transform: rotate(45deg);

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

Ways to increase the spacing between several menus

Need help with spacing between menus Tried using margin left and margin right but it's not working File: _Layout.cshtml <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport&quo ...

How to customize the hover background color for multicolored series in Highcharts?

Highcharts offers a background color for all columns in a series. The hover color across themes is consistently a light blue (155, 200, 255, .2). To see an example, visit: http://jsfiddle.net/38pvL4cb/ If you look at the source code, Highcharts creates a ...

The footer navigation in CSS shifts position when it is hovered over

My attempt to add a <nav> at the footer was unsuccessful. The navigation bar in this fiddle is completely wrong as the entire nav moves when hovered, even though I did not include any animations. I want the items in the <nav> to stay fixed. ...

Why is it that code that appears identical in the same browser and same size can look different when one version is deployed on localhost and the other remotely?

I've been working on a Material-UI Table where I customized the headers and table styles. While testing it locally with yarn start, it looked like this: https://i.stack.imgur.com/7yU2H.png However, when I viewed it on the remote system, it appeared ...

Choose the option for overseeing safaris

Hello there! I need some help with Safari. Can you please guide me on how to disable the arrows? https://i.stack.imgur.com/1gzat.png ...

How can CSS be effectively handled across master pages, content pages, and user controls?

When working on a web project that includes content pages, master pages, and user controls, what are the best practices for writing CSS for each of these elements? Should it be included in the page itself, or in a separate file? Is it better to have a sepa ...

Can you explain the process of utilizing CSS to create a smooth transition effect with

In the example application, I am utilizing the following plugin: I am perplexed by this line of code: style="width: 538px; transition: opacity 10000ms cubic-bezier(0.42, 0.65, 0.27, 0.99) 0s;. Can someone explain how the transition works? From what ...

use angularjs directive to position a div absolutely aligned with the right edge of another div

I am attempting to use an angularjs directive to align the right side of an absolute div with another div. The code is working, but I am encountering an issue where the children divs are slightly wider than their parent, causing the offsetWidth value to be ...

New button attribute incorporated in AJAX response automatically

data-original-text is automatically added in ajax success. Here is my code before: <button type="submit" disabled class="btn btn-primary btn-lg btn-block loader" id="idBtn">Verify</button> $(document).on("sub ...

Using Node.js and Less to dynamically select a stylesheet source depending on the subdomain

Currently, my tech stack consists of nodejs, express, jade, and less. I have set up routing to different subdomains (for example: college1.domain.com, college2.domain.com). Each college has its own unique stylesheet. I am looking for a way to selectively ...

What is the best way to combine two rows in a data table?

As I progress with my endeavor to construct a user-friendly transition matrix in R, following up on the previous post regarding adding a vertical line to the first column header in a data table, I am faced with a new challenge. Upon executing the provided ...

The footer fails to remain at the bottom of the page when there is limited content available

Despite searching extensively on Google, I have not been able to find a solution to this frequently asked question. My challenge is to consistently position the footer at the bottom of the page, even when there is minimal content present. Below is an exce ...

Is the background image on my class website too large?

I am having an issue with the redbar.png image in my CSS. It is positioned too high (within #container) and overlapping with the horizontal nav bar when it shouldn't be. I'm uncertain how to fix this problem. Any suggestions would be greatly appr ...

Creating an HTML button to reveal additional text on the same page

Currently, I am working on a project involving html and javascript. My issue lies in displaying multiple options on the same webpage without switching pages. Essentially, I have a plot and a few buttons on one page, and when a user clicks on any of these b ...

Bootstrap grid. Instead of moving to the next row, scroll horizontally when the content overflows

Here is the code snippet: <div class="row shochatgroup"> <div *ngFor="let message of messages" class="col-auto"> <button *ngIf="message.state.attributes.shochatpaid > 0 && message.state.at ...

The .AppendChild() method does not appear to be working as expected following the completion of

Encountering a peculiar problem here. The scripts run smoothly, but the content doesn't display on screen until I "inspect element" and then close the inspector window or zoom in/out. It's not an issue with the "display" CSS property because even ...

Is there a way to create a dropdown menu that transforms into a burger icon on smaller screens, while still housing all of my navigation items within it?

I'm currently working on a segment of my header that includes a navbar with 3 links, as well as a dropdown menu listing additional functionalities. Here is the current code I have: <div class="col-md-4 pt-4"> <nav class="navbar ...

What could be causing the misalignment of the Datepicker calendar in Material UI?

I have integrated a datepicker using the library "@mui/x-date-pickers/DatePicker". import { DatePicker } from "@mui/x-date-pickers/DatePicker"; import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment"; import { Locali ...

Does CSS padding-top: 100% take into account the parent's width?

I'm a bit perplexed by this discovery and I can't quite comprehend the rationale behind it. The provided code snippet showcases two nested DIVs. The outer DIV has specific dimensions and a relative position set, while the inner DIV also has fixe ...

Switch between display modes by clicking using collections

I am trying to figure out how to create a function that will only show content for the specific element in which my button is located. Currently, when I click the button it shows content for all elements with the 'one' class, but I want it to dis ...