CSS animation on mac vs windows - html

Question

I'm trying to create a spinner animation but i've encountered some issues with the difference between windows and mac displays.
The animation is a pretty basic circular spinner created with html and css
<div class="cow-spinner">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
and some basic css:
.cow-spinner {
display: inline-block;
position: relative;
width: 64px;
height: 64px;
}
.cow-spinner span {
box-sizing: border-box;
display: block;
position: absolute;
width: 51px;
height: 51px;
margin: 6px;
border: 3px solid black;
border-radius: 50%;
animation: cow-spin 1.2s ease-in-out infinite;
border-color: black transparent transparent transparent;
}
.cow-spinner span:nth-child(1) {
animation-delay: -0.45s;
}
.cow-spinner span:nth-child(2) {
animation-delay: -0.3s;
}
.cow-spinner span:nth-child(3) {
animation-delay: -0.15s;
}
#keyframes cow-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
The animation itself works perfectly, with a working example here: https://codepen.io/fatoilyguy/pen/oaZMMp
My issue is that on mac the circle itself has smooth edges with consistent width like so:
but on windows, the circle is pixelated and has weird width variations:
From what I can see, there is no difference between browsers on either platform. Is there any way i could prevent this difference from happening between platforms?

Answer 1

You could try a SVG approach and check if the rendering it's good everywhere
.loader {
display: inline-block;
height: 100px;
width: 100px;
transform: rotateZ(0deg);
animation: rotate 1.5s linear infinite;
}
svg {
max-width: 140px;
max-height: 140px;
fill: none;
stroke: #9bc;
stroke-width: 5px;
stroke-dasharray: 301px;
stroke-dashoffset: 200px;
animation: path 1.5s linear 0s infinite;
}
#keyframes path {
60% { stroke-dashoffset: 40px; }
100% { stroke-dashoffset: 200px; }
}
#keyframes rotate {
100% { transform: rotateZ(360deg) }
}
<div class="loader">
<svg viewport="0 0 100 100" preserveAspectRatio="xMidYMid meet">
<path d="M 50, 50 m -48, 0 a 48,48 0 1,0 96,0 a 48,48 0 1,0 -96,0" />
</svg>
</div>