CODEWITHSUNDEEP
google-chromecssscalecss-transforms
BeatLaG
BeatLaG

Reputation: 63

Circle scale animation Chrome bug with CSS transforms

I have some troubles with a simple animation in Chrome. I´m working on a very simple preloader that consists in a circle that increase its size in time. This is how I´m creating this:

#circle{
position:absolute;
    display:block;
        width:40px;
    height:40px;
        background:#000;
    top:50%;
    left:50%;
    margin:-20px 0 0 -20px;

    -webkit-border-radius:50%;
     -khtml-border-radius:50%;
       -moz-border-radius:50%;
            border-radius:50%;

    -webkit-transform:scale(0.3);
       -moz-transform:scale(0.3);
        -ms-transform:scale(0.3);

    -webkit-animation:loading 1.5s ease-out forwards infinite;
       -moz-animation:loading 1.5s ease-out forwards infinite;
        -ms-animation:loading 1.5s ease-out forwards infinite;
}

And this the animation:

@-webkit-keyframes loading {
    0%{-webkit-transform:scale(0.3);}
    50%{-webkit-transform:scale(1);} 
    100%{-webkit-transform:scale(0.3);}    
}

And here is the result, where the edged are cutted off only on Chrome. Safari, using webkit too is rendering this perfectly. (notice the cut on top and left sides)

enter image description here

And some last question related. How would you plan the graphic fallback for IE? I mean, I could ask to modernizr and create the fallback removing this and adding a graphic by JS. But I would like to know a better way using only CSS.

The animation does not work on IE, so the idea would be removing the black circle and adding in its place an animated preloader gif.

Hope you can help with it, because it is giving me crazy!

Thanks a lot!

Upvotes: 2

Views: 1106

Answers (2)

Valeriy Alikin
Valeriy Alikin

Reputation: 1

The problem is related to the property of the border-radius, change the circle to a svg picture.

Upvotes: 0

Andy
Andy

Reputation: 14575

It looks like it is getting hidden by its container.

Try this:

 #circle {
   margin:-19px 0 0 -19px;
 }

Upvotes: 1

Related Questions