Clip path circle small gap issue - css

Question

I have a page transition but when going from a white page to a black page, the circle clip path creates a small gap, as seen on the screenshot.
Meanwhile here is a demo https://elk-sand.vercel.app/. It happens when going from the home page to transformeren page from the navigation.
Another demo: https://codesandbox.io/s/dazzling-dirac-r000oy?file=/src/App.js
screenshot issue:
Funny how this question is being closed for not providing code while their is a code sandbox, so here you go for the ones who prefer it here:
.App {
font-family: sans-serif;
text-align: center;
}
#keyframes mymove {
from {
clip-path: circle(0%);
}
to {
clip-path: circle(50%);
}
}
<div
style="
height: 100vh;
background: red;
position: fixed;
inset: 0px;
animation: mymove 20s infinite;
"
className="App"
>
<div
style="
position: fixed;
inset: 0px;
background: yellow;
animation: mymove 20s infinite;
"
></div>
</div>
The issue is a red border around the yellow circle, which should not be there.

Answer 1

After some investigating, I found out it was due to a small scale from 105% to 100% and the clip-path circle which was getting bigger.
Adding translate-z did not solve this issue, unfortunately. I removed the small scale since it didn't add that much effect.
To fix the example that I sent is easy to solve just add 1% to the highest element circle path or set a delay on the first element.
.App {
font-family: sans-serif;
text-align: center;
}
#keyframes mymove {
from {
clip-path: circle(0%);
}
to {
clip-path: circle(50%);
}
}
<div
style="
height: 100vh;
background: red;
position: fixed;
inset: 0px;
animation: mymove 20s infinite;
animation-delay: 0.05s;
"
className="App"
>
<div
style="
position: fixed;
inset: 0px;
background: yellow;
animation: mymove 20s infinite;
"
></div>
</div>