Background linear gradient transition makes box shake - css

Question

So this is kind of hard to show, but I will try my best.
Basically I am trying to create a button, or div, that has some corner borders, which then expands on hover, just like this:
HTML:
<div class="container">
<div class="other-container">
<div class="corner-box">This is </div>
</div>
</div>
CSS:
.container {
display: grid;
}
.other-container {
width: 200px;
height: 100px;
transition: all 0.1s ease-in;
display: grid;
margin: 0px auto;
}
.corner-box {
box-sizing: border-box;
background:
linear-gradient(to right, black 2px, transparent 2px) 0 0,
linear-gradient(to right, black 2px, transparent 2px) 0 100%,
linear-gradient(to left, black 2px, transparent 2px) 100% 0,
linear-gradient(to left, black 2px, transparent 2px) 100% 100%,
linear-gradient(to bottom, black 2px, transparent 2px) 0 0,
linear-gradient(to bottom, black 2px, transparent 2px) 100% 0,
linear-gradient(to top, black 2px, transparent 2px) 0 100%,
linear-gradient(to top, black 2px, transparent 2px) 100% 100%;
transition: all 0.2s ease-in-out;
background-repeat: no-repeat;
background-size: 20px 20px;
width: 100%;
height: 100%;
&:hover {
background:
linear-gradient(to right, black 2px, transparent 2px) 0 0,
linear-gradient(to right, black 2px, transparent 2px) 0 100%,
linear-gradient(to left, black 2px, transparent 2px) 100% 0,
linear-gradient(to left, black 2px, transparent 2px) 100% 100%,
linear-gradient(to bottom, black 2px, transparent 2px) 0 0,
linear-gradient(to bottom, black 2px, transparent 2px) 100% 0,
linear-gradient(to top, black 2px, transparent 2px) 0 100%,
linear-gradient(to top, black 2px, transparent 2px) 100% 100%;
background-repeat: no-repeat;
background-size: 50% 50%;
transition: all 0.2s ease-in-out;
}
}
As such, this actually seems to work when I just run this code. So no problem there. However, when I try to implement it in my project something weird happens.
Basically I am trying to put it in my own code like this (modified of course) in my own code:
<div class="content">
<div class="corner-box">This is a test</div>
<div class="second-div">
<div class="corner-box">This is a test</div>
</div>
</div>
My CSS for this looks like this:
.content {
display: grid;
grid-template-columns: 1fr;
padding: 200px;
box-sizing: border-box;
align-content: start;
position: relative;
}
.second-div {
width: 100%;
min-height: 100vh;
padding-top: 150px;
align-self: start;
}
.corner-box {
box-sizing: border-box;
background:
linear-gradient(to right, teal 2px, transparent 2px) 0 0,
linear-gradient(to right, teal 2px, transparent 2px) 0 100%,
linear-gradient(to left, teal 2px, transparent 2px) 100% 0,
linear-gradient(to left, teal 2px, transparent 2px) 100% 100%,
linear-gradient(to bottom, teal 2px, transparent 2px) 0 0,
linear-gradient(to bottom, teal 2px, transparent 2px) 100% 0,
linear-gradient(to top, teal 2px, transparent 2px) 0 100%,
linear-gradient(to top, teal 2px, transparent 2px) 100% 100%;
background-repeat: no-repeat;
background-size: 20px 20px;
width: 200px;
height: 100%;
padding: 25px;
transition: all 1.0s ease-in-out;
&:hover {
background:
linear-gradient(to right, teal 2px, transparent 2px) 0 0,
linear-gradient(to right, teal 2px, transparent 2px) 0 100%,
linear-gradient(to left, teal 2px, transparent 2px) 100% 0,
linear-gradient(to left, teal 2px, transparent 2px) 100% 100%,
linear-gradient(to bottom, teal 2px, transparent 2px) 0 0,
linear-gradient(to bottom, teal 2px, transparent 2px) 100% 0,
linear-gradient(to top, teal 2px, transparent 2px) 0 100%,
linear-gradient(to top, teal 2px, transparent 2px) 100% 100%;
background-repeat: no-repeat;
background-size: 50% 50%;
transition: all 1.0s ease-in-out;
}
}
The problem, which I just can't figure out, is that the transition of the corner-box div inside the second-div looks like this (sorry for the bad gif):
I hope it shows that the transition/animation makes the right border of the box kind of shaky/wobbly, resulting in a not so pretty effect.
However, the box outside the second-div container works as intended, i.e.:
I honestly have no idea what is happening here. I have tried to strip anything not needed, and it seems that SOMETIMES it might be a positioning issue. So places where I have the box in containers that are center-aligned it sometimes disappear. But like in this case, there really are no positioning at all. Additionally, if I remove the display: grid it also seems to disappear in this case, but in other cases (as my example in the beginning) display: grid has no effect.
So it's kind of inconclusive. And I just can't remove my display: grid, as that is the basis of my entire setup.
So yeah, does anyone might have an answer to why this is happening ?