Ir para conteúdo
AlanB.

@-webkit-keyframes não funciona no Safari desktop e mobile

Recommended Posts

Boa tarde, tudo bem?

 

Tenho uma section na minha página inicial e o código é esse:

 

<section class="topo" id="bannerinicial" data-header="blue" data-aos="fade-up" data-aos-delay="300" data-aos-duration="1000" style="margin-top:50px;">
  <div class="container containerinicial">
    <div class="row">
    <div class="text-left col-sm-12 col-md-7 top text-white topoinicial">
        <h1 class="titulointroducaoazul display-4 text-white mb-3">SUA EMPRESA</h1>
       
    <p style="font-style: italic; font-weight:bold; color:white;" class="pintroducao  text-white my-3">Teste</p>

    </div>
  </div>
  <div class="row">
    <div class="col-12 text-center marcacao">
      
      <div class="dica">
         <span></span>
      </div>
      
    </div>
  </div>
</div>
</section>

Na parte do <div class="dica"> eu tenho um webkit keyframe no css:

 

.topo .dica{border:2px solid #fff;border-radius:15px;bottom:2rem;height:3rem;left:calc(50% - 0.875rem);position:absolute;width:1.75rem;z-index:2}
.topo .dica span{-webkit-animation:2s ease 0s normal forwards infinite running dica;animation:2s ease 0s normal forwards infinite running dica;background-color:#fff;border-radius:50%;display:inline-block;height:0.25rem;left:calc(50% - 0.125rem);position:absolute;top:0.5rem;width:0.25rem}
@-webkit-keyframes dica{30%,50%,70%{-webkit-transform:translateY(0rem);transform:translateY(0rem)}40%,60%{-webkit-transform:translateY(0.25rem);transform:translateY(0.25rem)}}@keyframes dica{30%,50%,70%{-webkit-transform:translateY(0rem);transform:translateY(0rem)}40%,60%{-webkit-transform:translateY(0.25rem);transform:translateY(0.25rem)}}@keyframes dica{30%,50%,70%{-webkit-transform:translateY(0rem);transform:translateY(0rem)}40%,60%{-webkit-transform:translateY(0.25rem);transform:translateY(0.25rem)}}

Esse css funciona no chorme, mas não funciona no Safari nem no desktop nem no mobile. Quando entro no site usando o Safari de 100 vezes que entro 1 vez funciona, o resto não funciona.

 

Alguem pode me ajudar como corrijo isso?

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Felipe Evangelista
      Fiz uma janelinha bem simples que vai ficar só até sexta-feira no ar, na tela principal de um site, avisando sobre os números de contato que estão diferentes e tal.
      A coisa é bem simples, fiz a janela no css e um js pra abrir logo que carrega e pra fechar no botão e se clicar fora da janela também. Até aí tudo normal.
      Mas no Safari, quando você clica pra fechar a janela, demora alguns segundos pra ela ser fechada, e isso apenas no Safari e eu não faço ideia do porquê.
      Já tive um problema no Safari, porque a ideia era que essa janela fosse um pop-upzinho daqueles que escurece o resto da página e tal, e justamente no Safari ficou zoado, e como precisava ser imediato e ia ficar só uma semana, tirei todo o efeito kk
      Enfim, a janela está assim:

       
      .popup { margin: 0 auto; padding: 20px; background: #fff; border-radius: 5px; width: 30%; position: relative; transition: all 5s ease-in-out; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .popup .close { position: absolute; top: 20px; right: 30px; transition: all 200ms; font-size: 30px; font-weight: bold; text-decoration: none; color: #DC0C22; } .popup .close:hover { color: #cc3000; } .popup .content { max-height: 30%; overflow: auto; } @media screen and (max-width: 700px){ .box{ width: 70%; } .popup{ width: 70%; } } E o js:
       
      // Pop-Up Temporario $(document).ready(function() { $('.popup').css('zIndex', '10'); $('.popup-close').click(function(e) { e.preventDefault(); $('.popup').css('zIndex', '0'); }); $(document).click(function(e) { $('.popup').css('zIndex', '0'); }); }); Se alguém quiser ver: abimad.com.br
    • Por RedHot66
      Pessoal, tenho um sistema que eu fiz aqui e preciso testar ele em um navegador safari do iphone7, alguem sabe como posso fazer isso ? Utilizo o Windows.
      OBS: Não quero testar a resolução e sim umas funcionalidades que fiz em js para ver se esta rodadando normalmente e não possuo o iphone 7.
    • Por Jiraya Tupiniquim
      Pessoal, boa tarde.
       
      Como resetar os inputs para iPhones e Macs, IOS, para pegar as configurações que quero?  
       
      Obrigado desde já. 
    • Por Sandson
      Fala galera! Eu estou com uma dúvida sobre o placeholder....
       
      /* PARA CHROME, SAFARI, ANDROID E IOS */ #menu li.search ::-webkit-input-placeholder { color: #fff; } /*PARA INTERNET EXPLORER*/ #menu li.search :-ms-input-placeholder { color: #fff; } /*PARA MICROSOF EDGE*/ #menu li.search ::-ms-input-placeholder { color: #fff; } /*PARA FIREFOX*/ #menu li.search ::-moz-placeholder { color: #fff; } /* PARA OPERA */ #menu li.search ::-o-input-placeholder { color: #fff; } Meu css ta assim para eu poder colocar no placeholder a cor branca... Originalmente ele é cinza...
      Funciona normalmente nos outros navegadores..
      Mas no firefox não funciona... Como eu mudo? Meu firefox é o 53
    • Por alexndrre
      Bom, trabalhei nesse layout responsivo para o www.blog.shantihi.com.br e ele está com a barra lateral totalmente desorganizada apenas no navegador Safari em computador Mac. No Internet Explorer, ele aparecia quebrado, mas consegui arrumar e está adaptado a todos navegadores, menos no Safari no Mac.

      Será que alguém poderia me ajudar?


×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.