Scaling a 50 percent grade with a border in Chrome does not create a perfect circle
I have some circles created with 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 this 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>
It seems to be a specific Chrome bug, at least it looks great in Firefox + IE. Suggestions?
+3
user1231561
source
to share
2 answers
Not sure if this is a chrome issue. But when I use the above code with uniform width and height (say 4px or 6px), it works fine, but with an odd width error like 5px.
+1
Gaurav kushwaha
source
to share
It looks like due to how Chrome renders the circle. If you enlarge the circle (I tried 50 px) it showed a full circle just fine. Apparently, with some very small dimensions, Chrome doesn't try to display corner corners as much.
If you want to fix this, SVG might be a good option. Chrome shouldn't have any problem displaying it.
+1
angularPrism
source
to share