CODEWITHSUNDEEP
cssanimationtransform
Sadman Rizwan
Sadman Rizwan

Reputation: 309

Scale animation breaks border radius when zoomed in and out

I am running the following code snippet:

#mydiv{
  width: 2px;
  height: 2px;
  border-radius: 50%;
  display: inline-block;
  margin: 100px;
  background-color: red;
  animation: wave 1s infinite;
}

@keyframes wave{
  0%{
    transform: scale(1, 1);
  }
  100%{
    transform: scale(100, 100);
  }
}
<div id="mydiv"></div>

Normally this animation runs fine. The problem occurs when I zoom in and out my screen. After zooming in and then zooming out I see that border-radius starts getting incorrectly shown. I have taken two screenshots of how it gets:

image1 enter image description here

The first image is taken on Microsoft Edge. It happened when I zoomed in and out using CTRL+ and CTRL-. Doing the same thing in Chrome also resulted in something exactly like this. The second one happened when I zoomed in and out using Chrome dev tools. I have also experienced this in the android version of Chrome (that's where I noticed it first). It didn't happen in Firefox.

I don't know why it happens, but my guess is, zooming in and out suddenly affects the calculation of CSS transform.

What is the actual reason of this bug? Is there a fix for it?

Upvotes: 2

Views: 646

Answers (1)

Shojeesh CP Vattoli
Shojeesh CP Vattoli

Reputation: 56

Try this

#mydiv{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    display: inline-block;
    margin: 100px;
    background-color: red;
    animation: wave 1s infinite;
}

@keyframes wave{
    0%{
        transform: scale(0);
    }
    100%{
        transform: scale(1);
    }
}
<div id="mydiv"></div>

Upvotes: 1

Related Questions