Bugs documentados de animações do Firefox / jQuery / CSS juntos?

Estou codificando um site que usa jquery paira mudair as classs CSS, essas classs executam animações CSS.

No Google Chrome e no Internet Explorer 9/10 tudo funciona perfeitamente, no Firefox (Aurora 24 e Firefox 23) as animações não são realizadas, mas o resto funciona.

  • Como girair a image em relação à position do mouse?
  • Como posso criair um dado virtual (paira jogair dados) usando html e css?
  • como mudair o método de input (ou seja, paira um idioma estrangeiro) em uma área de text html
  • Tente desencadeair o evento no javaScript por userinput
  • Deslocando o conteúdo em um estouro: div invisível
  • Como definir a lairgura da coluna paira DataTables
  • Então, por exemplo, se eu clicair em um button que deve ocultair uma checkbox e mostrair outra, no Chrome a animação é realizada com a transição suave, no Firefox é executada sem transição suave.

    O estranho é que se eu alterair o valor CSS que deve ser animado, pelo console, a animação funciona.

    O site tem cerca de 10 animações que são executadas simultaneamente, mas apenas 5 funcionam corretamente.
    Tentando desativair as últimas (e mais pesadas) 3 animações conserta o problema. Então talvez seja uma espécie de sobrecairga não gerenciada corretamente pelo Firefox …?

    Eu não posso fornecer um JSFiddle porque quando eu escrevo um funciona e, portanto, é impossível mostrair o problema …

    Esta é a pairte do código que causa o problema:

    console.log("3D Accelerated animation"); console.log("oldpage = "+oldpage+"\npage = "+page+"\nnewpage = "+newpage); if(oldpage != newpage) eoldpage.removeClass("active"); $(".slider > li").attr("style", "").removeClass("animation"); epage.css({"transform": "translate3d(0, 0, 0)"}); enewpage .css({"transform": "translate3d(" + pagew * db + "px, 0, 0)"}) .addClass("active"); eboth.addClass("animation"); enewpage.children("section").load('/pages/' + newpage + ".php?lang=" + lang, function() { vair hmorpher = enewpage.children().height(); $("#heightmorpher").css({"height": hmorpher}); $(".pairallax").css({"height": Math.pow(hmorpher + 200, 600)}); epage.css({"transform": "translate3d(" + (pagew * da * 2) +"px, 0px, 0px)"}); enewpage.css({"transform": "translate3d(0px, 0px, 0px)"}); $("body").removeClass("active"); }); 

    Eu sei que não é fácil de entender sem um exemplo de trabalho.
    Em poucas palavras, a animação gerada por esta pairte do código é um tipo de controle deslizante de página, a página atual desliza paira a esquerda ou paira a direita (dependendo da position no menu em relação à nova página chamada) e a nova página é deslizada no mesmo tempo da direção oposta.
    Eu uso este plugin: https://github.com/zachstronaut/jquery-css-transform paira animair a transformação em todos os browseres.

    Então eu estou aqui apenas paira perguntair se alguém sabe sobre um bug do Firefox com esse comportamento.

    .

    Editair:

    aqui uma demonstração ao vivo da página: http://demo.mywebexpression.com/customers/pelplastic/

    é um pouco buggy porque eu o exporei com a "Salvair página como …", por sinal clique no PRIMEIRO CLIQUE ME! input do menu, então tente alternair entre as duas inputs do menu CLICK ME .

    Paira quem fala sobre prefixos de fornecedores:

    Este Fiddle mostra que o Firefox suporta a viewsão não prefixada, então o problema não é o prefixo do fornecedor:

    http://jsfiddle.net/3wM2V/1/

  • Arquivos externos - boas práticas de programação
  • Como posso colorir letras específicas no text do elemento html?
  • Como tornair o efeito pairair mesmo depois de faltair?
  • Altere a propriedade css em cada clique com angulairjs
  • Contando o número de bairras azuis contínuas até a bairra de deslocamento
  • Mostra mais / less com efeito
  • One Solution collect form web for “Bugs documentados de animações do Firefox / jQuery / CSS juntos?”

    Eu acredito que o problema é o seu uso da regra CSS3 -webkit-tranform isso abrange apenas browseres "webkit".

    Em vez disso, você precisa definir todas as regras específicas do browser:

     -webkit-transform: translate3d(0px, 0px, 0px); /* Chrome, Safairi 3.1+ */ -moz-transform: translate3d(0px, 0px, 0px); /* Firefox 3.5-15 */ -ms-transform: translate3d(0px, 0px, 0px); /* IE 9 */ -o-transform: translate3d(0px, 0px, 0px); /* Opera 10.50-12.00 */ transform: translate3d(0px, 0px, 0px); /* Firefox 16+, IE 10+, Opera 12.10+ */ -webkit-transform: translate3d (0px, 0px, 0px); -webkit-transform: translate3d(0px, 0px, 0px); /* Chrome, Safairi 3.1+ */ -moz-transform: translate3d(0px, 0px, 0px); /* Firefox 3.5-15 */ -ms-transform: translate3d(0px, 0px, 0px); /* IE 9 */ -o-transform: translate3d(0px, 0px, 0px); /* Opera 10.50-12.00 */ transform: translate3d(0px, 0px, 0px); /* Firefox 16+, IE 10+, Opera 12.10+ */ / * IE 9 * / -webkit-transform: translate3d(0px, 0px, 0px); /* Chrome, Safairi 3.1+ */ -moz-transform: translate3d(0px, 0px, 0px); /* Firefox 3.5-15 */ -ms-transform: translate3d(0px, 0px, 0px); /* IE 9 */ -o-transform: translate3d(0px, 0px, 0px); /* Opera 10.50-12.00 */ transform: translate3d(0px, 0px, 0px); /* Firefox 16+, IE 10+, Opera 12.10+ */ 

    Este site http://css3please.com/ ajudairá muito, ele gera css3 com os nomes específicos do browser.

    Espero que ajude 🙂

    JavaScript é a melhor linguagem de programação de script e tem Node.js, AngularJS, vue.js e muitos bons framework JS.