Recently, probably because of the chrome browser update, the previous normal ripple animation effect has become abnormal, when the box-shadow spread is greater than 1em, it is no longer round, and I do not see where there is relevant documentation.
Request for some instructions or patch.
Html Code:
<html>
<head>
<body style="background-color:#ddd">
<div class="screen">
<div class="sense-aroma"></div>
</div>
</body>
</head>
</html>
CSS Code:
.screen {
width: 320px;
height: 550px;
position: relative;
background-color: #242739;
margin: 0px auto;
box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.4);
}
.sense-aroma {
background-color: rgba(228, 36, 195, 0.6);
box-shadow: 0px 0px 21px 0px #E424C3;
width: 1em;
height: 1em;
border-radius: 50%;
animation: ripple 1s linear infinite;
position: absolute;
top: 50%;
margin: 0px auto;
left: 0;
right: 0;
}
@keyframes ripple {
0% {
box-shadow: 0 0 0 0 rgba(228, 36, 195, 0.2), 0 0 0 1em rgba(228, 36, 195, 0.2), 0 0 0 4em rgba(228, 36, 195, 0.2), 0 0 0 6em rgba(228, 36, 195, 0.2);
}
100% {
box-shadow: 0 0 0 1em rgba(228, 36, 195, 0.2), 0 0 0 4em rgba(228, 36, 195, 0.2), 0 0 0 6em rgba(228, 36, 195, 0.2), 0 0 0 9em rgba(228, 36, 195, 0);
}
}