I am facing an issue where scaling a SVG using CSS results in flickering. Are there any modifications I can make to the CSS or SVG to eliminate this flickering problem? I have tried creating the SVG both with and without a mask in Illustrator, but the flickering persists when using CSS scale. Even scaling with gsap leads to the same issue.
.wrapper{
max-width: 960px;
margin: 0 auto;
background-color: antiquewhite;
padding: 250px;
}
.box{
width: 200px;
min-height: 200px;
margin: 0 auto;
background-color: aqua;
transition: transform 2.5s;
cursor: pointer;
color: blueviolet;
text-align: center;
}
.box:hover{
transform: scale(3);
opacity: 1;
}<div class="wrapper">
<div class="box">
<p>Hover Blue box to Zoom in</p>
<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 888.12 90.88">
... (SVG Path Data)
</svg>
</div>
</div>Tried also to start with opacity set at zero, but it still flickers on scale
How to stop svg flickering with css scale?
Here is a link to see what happens in codePen: