Estou com um problema para fazer uma animação onde tenho um circle
em svg
e preciso fazê-lo aumentar até cobrir toda a tela, como um FAB
que se transforma em uma div, já fiz uma animação dessa porém com muita gambiarra de background-size
e background-position
.
O modo mais simples e que tem melhor performance foi usando o transform: scale();
, ficou de jeito que eu queria mas aí vem o problema, no Firefox funcionou perfeitamente, porém no Chrome (e no Opera que estou utilizando) o svg fica 'borrado' por assim se dizer enquanto está ocorrendo o scale
.
Tem algum modo de corrigir isso nem que tenha que usar alguma biblioteca js ou algo do tipo, pois já tentei de tudo o que eu sei e nada adiantou. Segue o código que estou usando.
$(document).ready(function() {
$(".btn").click(function () {
svg = $(this);
if(svg.attr("class") == "btn active") {
svg.attr("class", "btn");
}
else {
svg.attr("class", "btn active");
}
});
})
.btn {
fill: #1dc7ff;
width: 3.5rem;
height: 3.5rem;
border-radius: 50%;
cursor: pointer;
position: fixed;
right: 1rem;
bottom: 1rem;
transition: .05s;
}
.btn:active {
transform: scale(.95);
transition: 4s;
}
.btn.active {
transform: scale(100);
transition: 10s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<svg class="btn">
<circle cx="1.75rem" cy="1.75rem" r="1.75rem"></circle>
</svg>
Obs: já tentei usar o código abaixo que encontrei em vários fóruns mas não resolveu:
svg {
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);
transform: translateZ(0);
}
svg
fica borrado durante a animaçãoscale
como deixei o exemplo na imagem.