1

To com um problema com o box-shadow, tenho a seguinte linha: box-shadow: -300px -300px 300px var(--roxo) inset; Toda vez que uso box-shadow com um tamanho bem alto como neste caso as animações e transições ficam muito lento quase travando ou quando eu passo o mouse por exemplo em cima de um botão com :hover o box-shadow dá uma tremida, mesmo que eles não se comuniquem. Queria saber como resolver o problema das animações e transições ficarem lentas e bugadas quando o box-shadow fica muito alto.

2
  • Relacionada, mas tb está sem resposta a mais de 2 anos... pt.stackoverflow.com/questions/339175/…
    – hugocsl
    Commented 7/01/2021 às 11:26
  • Adicione tb o seu código atual para a gente poder testar exatamente o senário que vc tem ai, inclua o html e css mínimos para podermos simular o seu problema
    – hugocsl
    Commented 7/01/2021 às 12:49

1 Resposta 1

0

Acontece que de fato o box-shadow é lento, pois precisa ser re-desenhado em todo frame durante a animação, o que faz com que as transições fiquem mais pesadas.

O ideal para solucionar isso é manter um pseudo-elemento renderizado com opacity: 0 e animar essa opacidade.

.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>

1
  • Obrigado ajudou a resolver um dos meus problemas. Commented 7/01/2021 às 22:27

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .