Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

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

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