box-shadow slows Chrome animations and transitions

Asked

Viewed 43 times

1

I have a problem with box-shadow, I have the following line: box-shadow: -300px -300px 300px var(--roxo) inset; Every time I use box-shadow with a very high size as in this case the animations and transitions get very slow almost locking or when I pass the mouse for example on top of a button with :The box-shadow gives a shake, even if they do not communicate. I wanted to know how to solve the problem of animations and transitions getting slow and buggy when the box-shadow gets too high.

css3

  • Related but unanswered for more than 2 years... https://answall.com/questions/339175/a-propriedade-de-css-box-shadow-afeta-a-performance-da-p%C3%a1gina-e-renderiza%C3%A7%C3%a3o-dos

  • Add your current code so we can test exactly what password you have there, include the minimal html and css so we can simulate your problem

1 answer

0


It turns out that in fact the box-shadow is slow as it needs to be re-drawn throughout the frame during animation, which makes transitions heavier.

The ideal solution to this is to keep a rendered pseudo-element with opacity: 0 and animate this opacity.

.shadow {
  display: flex;
  align-items: center;
  width: 300px;
  height: 300px;
  margin: 50px;
  float: left;
  box-sizing: border-box;
  padding: 30px;
  font-family: sans-serif;
  font-size: 18px;
  text-align: center;
  border-radius: 50px;
}

#slow-transition {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
  transition: box-shadow 500ms;
}

#slow-transition:hover {
  box-shadow: 0 10px 50px 0 rgba(0, 0, 0, 0.5);
}

#fast-transition {
  position: relative;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
}

#fast-transition::before {
  content: ' ';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 50px;
  box-shadow: 0 10px 50px 0 rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 500ms;
}

#fast-transition:hover::before {
  opacity: 1;
}
<div id="slow-transition" class="shadow">
  <p>Box-Shadow normal com transição lenta</p>
</div>
<div id="fast-transition" class="shadow">
  <p>Transição rápida da opacidade de pseudo-elemento</p>
</div>

Browser other questions tagged css3

You are not signed in. Login or sign up in order to post.