4

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);
  }
}

https://codepen.io/srikantshetty/pen/bpWVYV

sensen
  • 77
  • 4
  • 2
    Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a **Stack Snippet**. Although you have provided a link, if it was to become invalid, your question would be of no value to other future SO users with the same problem. See [**Something in my website/example doesn't work can I just paste a link**](http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it). – Paulie_D Jun 06 '22 at 09:54
  • 1
    The chrome implementation was updated: https://github.com/w3c/csswg-drafts/issues/7103#issuecomment-1135036126 – Temani Afif Jun 06 '22 at 09:57

0 Answers0