I've been working on coding in HTML, but I've encountered an issue where my device seems to struggle with running CSS smoothly. You can take a look at the code I've written on CodePen.
html {
height: 100%;
}
body {
background: linear-gradient(150deg, rgb(30, 30, 30) 0%, rgb(20, 20, 20) 100%);
}
.parent {
margin-left: auto;
margin-right: auto;
top: 50px;
width: 230px;
height: 90px;
position: relative;
}
#child {
margin-left: auto;
margin-right: auto;
position: absolute;
top: 0;
left: 0;
}
.button-frame {
margin-left: auto;
margin-right: auto;
background: none;
display: inline-block;
width: 230px;
height: 90px;
}
.path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: frame 4s ease-in-out;
animation-fill-mode: forwards;
}
@keyframes frame {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
.button {
margin-left: 5px;
margin-top: 5px;
display: inline-block;
background: none;
cursor: pointer;
text-decoration: none;
border: none;
background-color: white;
width: 220px;
height: 80px;
animation: butt 3s ease-in-out;
font-size: 24px;
animation-fill-mode: forwards;
transition: 1s;
}
@keyframes butt {
from {
margin-top: 30px;
opacity: 0%;
}
to {
margin-top: 5px;
}
}
button:hover {
font-size: 26px;
text-shadow: 4px 4px 2px #999999;
}<div class="parent">
<svg class="button-frame">
<polygon class="path" points="0,0 200,0 230,30 230,60 230,90 30,90 0,60" style="fill:none;stroke:white;stroke-width:3px"/>
<text x="" y="" text-anchor="black" fill="white" font-size="">Click here<text>
</svg>
<div id="child"><button class="button">Learn More</button></div>
</div>I've tested this code on different devices, and it worked smoothly on all of them. However, on my device, the transition appears to be laggy, almost as if there's a lack of frames per second.
I've attempted turning off extensions, trying different browsers (including Opera, Edge, and Firefox), but unfortunately, the issue persists. Even enabling "Use hardware acceleration when available" hasn't made a difference.
Any assistance you can provide would be greatly appreciated.