CODEWITHSUNDEEP
csstransform
user1231561
user1231561

Reputation: 3359

Scaling a border-radius 50% class in Chrome doesn't produce a perfect circle

I have multiple circles produced by the following CSS:

.map-circle {
    position: absolute;
    cursor: pointer;
    border-radius: 50%;
    width: 5px;
    height: 5px;
    z-index: 999;
    background-color: red;
}

For some reason when I scale that circle to a large number, the circle doesn't stay perfect in Chrome:

.map-circle {
  transform: matrix(10, 0, 0, 10, 0, 0);
}


.map-circle {
  position: absolute;
  left:50px;
  top:50px;
  cursor: pointer;
  border-radius: 50%;
  width: 5px;
  height: 5px;
  z-index: 999;
  background-color: red;
  transform: matrix(10, 0, 0, 10, 0, 0);
}
<div class="map-circle"></div>

Seems to be a Chrome specific bug, atleast it's looking fine in Firefox + IE. Suggestions?

enter image description here

Upvotes: 3

Views: 1021

Answers (2)

alloy
alloy

Reputation: 766

This appears to be because of how closely Chrome renders the circle. If you enlarge the circle (I tried 50 px), it showed a complete circle just fine. Apparently, with certain very small sizes, Chrome doesn't try as hard to render border-radiused corners.

If you want to fix this, an SVG might be a good option. Chrome shouldn't have any trouble rendering that one properly.

Upvotes: 1

Gaurav Kushwaha
Gaurav Kushwaha

Reputation: 36

Not sure if this is an issue with chrome. But when I use above code with even width and height (say 4px or 6px) it is working fine, but fails with odd widths like 5px.

Upvotes: 1

Related Questions