Why does my animation add artefacts to my spinner in Moz Firefox? - html

Question

I wanted to customise a nice spinner in CSS to indicate loading and it works nicely and looks great in everything except for Mozilla. Can anyone explain to me why, and how to fix it? Or at least point me in the right direction.
<style>
.loader {
display: inline-flex;
width: 0.75em;
height: 0.75em;
border-radius: 50%;
outline: none;
position: relative;
animation: rotate 1s linear infinite
}
.loader::before {
content: "";
box-sizing: border-box;
position: absolute;
inset: 0px;
border-radius: 50%;
border: 0.15em solid;
animation: prixClipFix 1.8s linear infinite;
}
:is(h1, h2, h3, h4, h5) .loader::before {
border-width: 0.1em;
}
#keyframes rotate {
100% {
transform: rotate(360deg)
}
}
#keyframes prixClipFix {
0% {
clip-path: polygon(50% 50%, 0 0, 10% 0, 10% 0, 10% 0, 10% 0)
}
25% {
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)
}
50% {
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)
}
75% {
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)
}
100% {
clip-path: polygon(50% 50%, 0 0, 10% 0, 10% 0, 10% 0, 10% 0)
}
}
</style>
<div>
<!-- <div class="spin"></div> -->
<h1>Loading
<div class="loader"></div>
</h1>
<h2>Loading
<div class="loader"></div>
</h2>
<h3>Loading
<div class="loader"></div>
</h3>
<h4>Loading
<div class="loader"></div>
</h4>
<h5>Loading
<div class="loader"></div>
</h5>
Loading
<div class="loader"></div>
</div>
Looking into it, I found that FF doesn't appreciate the div rotating while the polygon grows and shrinks. Turning either one off solves the problem however I would like it to do both.

Answer 1

Thanks to Miriam it is now fixed! I added border-radius: 0.01px; and overflow: hidden; to the .loader parent class.