strokes above an SVG for some reason - html

Question

I have an SVG I made, now it has a couple of blocks that move in a straight line.
sometimes when the blocks move it just adds a stroke above them, although I have stroke disabled.
NOTE: if you look closer you can see the orange strokes above the blocks
here's what it looks like.
#keyframes move {
0% {
transform: translate3d(250px , 0px , 0px);
}
50% {
transform: translate3d(-200px , 0px , 0px);
}
100% {
transform: translate3d(250px , 0px , 0px);
}
}
#loading_bar .cls-2 {
stroke: none;
transition: transform 2s ease-in-out;
animation: move 4s infinite forwards;
}
<svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080">
<defs>
<style>
.cls-1{fill:#64b2c1;}
.cls-2{fill:orange;}
.cls-3{fill:transparent;stroke-miterlimit:10;}
.cls-4{fill:#191919;}
</style>
</defs>
<g id="background">
<rect class="cls-1" width="1920" height="1080"/>
<rect class="cls-2" x="871" y="769" width="90" height="84"/>
</g>
<g id="loading_bar">
<rect class="cls-4" x="545" y="769" width="792" height="84"/>
<rect class="cls-2" x="789" y="789" width="40" height="40"/>
<rect class="cls-2" x="988" y="789" width="40" height="40"/>
<rect class="cls-2" x="888" y="789" width="40" height="40"/></g></svg>