Clever Geek Handbook

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>
Run code


It seems to be a specific Chrome bug, at least it looks great in Firefox + IE. Suggestions?

enter image description here

+3


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


source


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


source






More articles:


All Articles