2012-07-19 20 views
5

Se construyó un sitio donde gran parte de él se basa en dar la vuelta a los DIV con efecto 3D, se actualizó a FF14 ayer por la mañana y el efecto se rompió. Funciona bien en FF13, Chrome, IE9, etc.Firefox 14 rompe el efecto 3D 'flip de cartas': ¿alguien sabe por qué?

No puedo publicar el sitio en el que estoy trabajando, pero este sitio está roto exactamente de la misma manera, salta entre el anverso y el reverso de la tarjeta en lugar de rotación

http://jigoshop.com/product-category/extensions/

Alguien tiene alguna idea?


EDIT: OK, probablemente debería haber incluido más información

estoy usando este plug-in para manejar la voltear

http://www.zachstronaut.com/projects/rotate3di/

estaba equivocado cuando dijo que era la misma técnica que ese otro sitio web, ya que parece ser un CSS simple, mientras que este complemento es para jQuery. Aquí hay un enlace a una demo que lanzó junto

http://olliesilviotti.co.uk/the-laboratory/cards/demo/


EDIT: Se trata de cómo se utiliza la consulta:

$('#boxes .box div.back').hide().css('left', 0); 

      function mySideChange(front) { 
       if (front) { 
        $(this).parent().find('div.front').show(); 
        $(this).parent().find('div.back').hide(); 

       } else { 
        $(this).parent().find('div.front').hide(); 
        $(this).parent().find('div.back').show(); 
       } 
      } 


      $('#boxes .box').live('mouseover', function() { 
       if (!$(this).data('init')) { 
        $(this).data('init', true); 
        $(this).hoverIntent({ 
         over: function() { 
          $(this).find('div').stop().rotate3Di('flip', 250, {direction: 'clockwise', sideChange: mySideChange}); 
         }, 
         timeout: 1, 
         out: function() { 
          $(this).find('div').stop().rotate3Di('unflip', 500, {sideChange: mySideChange}); 
         } 
        }); 
        $(this).trigger('mouseover'); 
       } 
      }); 

El marcado se ve así:

<div id="boxes"> 
     <div class="box floated-box"> 
       <div class="front">Random Number</div> 
       <div class="back">I am the back of the card</div> 
     </div> 
</div> 
+1

También está roto en FF 17a. –

+0

Sería bueno tener algún ejemplo de marcado y dónde lo llamas, pero verificare la fuente del complemento. –

+0

He agregado el marcado y el jQuery ahora. Supuse que no sería necesario ya que sería la forma en que FF ahora maneja las transformaciones en lugar del plugin – ollie

Respuesta

4

Esto es en realidad porque Firefox sigue lates t normas. De https://developer.mozilla.org/en/Firefox_14_for_developers

Como se ha retirado del proyecto de norma, el apoyo a la inclinación() función se ha eliminado de transformar la propiedad.

(Esto hace que toda la declaración -moz-transform se deja caer.)

En lugar de informar de errores en Bugzilla, yo diría que se debe informar al autor del plugin.

+0

Tiene perfecto sentido por qué mi consola sigue enviando spam 'Error al analizar el valor de 'transformar'. Declaración caída. Constantemente. +1 por el buen hallazgo. –

+0

Muy bien, eso tiene sentido (pero es más que un poco molesto). ¿Conoces alguna otra forma de simular este efecto 3D sin utilizar el sesgo? – ollie

+0

@ollie Me gustaría dar una oportunidad a las transformaciones 3D, pero nunca las he usado. Tenga en cuenta que las especificaciones de 3D Transforms también han cambiado recientemente, por lo que el soporte puede variar. – duri

Cuestiones relacionadas