Linha do tempo de Bug no Safari de uma animação CSS com keyframes
Licença atual: CC BY-SA 4.0
11 eventos
quando alternar formato | o que | por | licença | comentário | |
---|---|---|---|---|---|
29/07/2019 às 10:19 | voto | aceitação | Ivan Ferrer | ||
26/07/2019 às 18:31 | comentário | adicionado | hugocsl | Alguma coisa que eu tirei estava buggando rss, esses 700ms era o tempo de execução, não sei se estava relacionado a ele. Mas com esse modelo mais simples que fiz, fica até melhor para vc dar manutenção no código, além de ter resolvido o problema :). Valeu a força 💪 | |
26/07/2019 às 18:30 | resposta | adicionado | hugocsl | linha do tempo pontuação: 2 | |
26/07/2019 às 17:45 | comentário | adicionado | Ivan Ferrer | Pode sim, vc limpou o código como no seu exemplo do codepen e funcionou, valeu! Acho que o problema é que estava tendo era esse 700ms no início da classe, que não precisava. | |
26/07/2019 às 17:31 | comentário | adicionado | hugocsl | Ivan resolveu com a dica ou resolveu de outra forma? Se foi com o código posso postar como resposta? | |
26/07/2019 às 17:28 | comentário | adicionado | Ivan Ferrer | Resolveu aqui, valeu! | |
25/07/2019 às 15:42 | comentário | adicionado | hugocsl |
Ivan testa ai pra ver se o bug continua. Outra coisa, segundo o CanIUse vc nem precisa escrever o vendor prefix -webkit- para transform ou animation , então segue a versão simplificada. Eu dei uma boa limpada no CSS e a animação ficou muito similar codepen.io/hugocsl/pen/bXwbaJ
|
|
25/07/2019 às 15:28 | comentário | adicionado | hugocsl | Como não consigo debugar no safari, acho que nessa não consigo ajudar muito... mas vou "refazer" essa animação com um CSS mais limpo e te passo pra vc testar. | |
25/07/2019 às 15:11 | comentário | adicionado | Ivan Ferrer | Coloquei, mesmo assim, não rolou... :( | |
25/07/2019 às 15:02 | comentário | adicionado | hugocsl |
Não sei se vai resolver, mas coloque um valor final na animação nos 100%, tipo 100% { -webkit-transform: translate3d(0px, 0px, 0px); } e se vc quer que a animação só se repita 1x coloque o -webkit-animation-fill-mode: forwards; pode ser que ajude tb. Testa ai e me fala, aqui não tenho um ambiente com Safari par poder testar ... Outra opção tb é testar trocando translate3d por translateY(30px) etc já iqe vc só movimenta o elemento no eixo Y ele já é o suficiente
|
|
25/07/2019 às 14:54 | histórico | perguntada | Ivan Ferrer | CC BY-SA 4.0 |