CODEWITHSUNDEEP
cssanime.jsborder-radius
Bradley
Bradley

Reputation: 1281

Border-radius circle loses shape when scaling at different browser zoom levels

I have a small circle at 4px and I want to scale its size using anime.js. It works great at 100% zoom (default), but I also want it to behave the same at default zooms from 50-100%.

Example fiddle: https://jsfiddle.net/6x4ry3no/1/

As seen in the example fiddle, if you 'CMD' + '-' or equivalent on Windows to zoom out, you will notice the circle becomes a rounded quadrilateral at other zoom levels between 50-100%, which is undesirable.

It seems to be loosely related to the divisibility of the zoom percentage by the width/height as at some percentages it seems to be fine.

Ideally I'd just use an SVG to avoid this but, as far as I'm aware, scaling SVGs also requires a transform to keep the shape in the same place which I'd like to avoid.

Any ideas?

Upvotes: 0

Views: 1180

Answers (1)

Impirator
Impirator

Reputation: 1442

None of the tricks I tried worked to preserve the roundness of the circle when zoomed out—super weird. However, if I replace the div in your fiddle with the an SVG (and remove the border-radius and bg-color from CSS), things do seem to work correctly:

#circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
}
<svg viewBox="0 0 100 100" id="circle">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>

Upvotes: 1

Related Questions