Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Funciona no HTML preview mas não no chrome?

Quando faço tudo corretamente (inclusive já copiei e colei o codigo para ver se funciona) a animação funciona corretamente no HTML preview do Atom, mas quando abro no Chrome o banner não se meche por nada.

como resolvo isso?

Java

$('#bs-example-navbar-collapse-1').on('show.bs.collapse', function(){
    $('.topCasaFina-banner').css('transform', 'translate(-50%, 10%)');
});


$('#bs-example-navbar-collapse-1').on('hide.bs.collapse', function(){
    $('.topCasaFina-banner').css('transform', 'translate(-50%, -50%)');
});;

Trecho do CSS

.topcasafina-banner {
  color: #FFF;
  background-color: rgba(0, 0, 0, .5);
  padding: 20px;
  width: 70%;
  border-radius: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  text-align: justify;
  transition: 0.3s;
}
3 respostas

Oi Pedro,

Não tenho certeza disso, mas pode ser pela ordem dos transforms no seu css. Me diz depois se era isso mesmo.

Na sua classe .topcasafina-bannervocê definiu dois transforms:

  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);

A propriedade -webkit-transform serve para os navegadores mais antigos que não tinham suporte à versão final da propriedade transform (Chrome <36, Opera <23, Safari<9, etc). Porém, a propriedade -webkit-transform continua funcionando nos navegadores mais novos mesmo que tenham suporte a propriedade transform e aí que vem o problema.

O Chrome mais novo que tem suporte ao transform está ignorando e usando a propriedade -webkit-transform. Pra fazer ele usar o transform novo, basta inverter a ordem que ele está escrito no css:

 -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
solução!

Artur, Obrigado! No fim era as maiusculas no nome da classe que por algum motivo o Chrome tava implicando e o Atom preview não.

Boa Pedro! Esses typos são sempre difíceis de achar.