2012-07-19 14 views
5

Costruito un sito in cui una gran parte di esso si basa sul ribaltamento dei DIV con un effetto 3D, aggiornato a FF14 ieri mattina e l'effetto è stato interrotto. Funziona bene in FF13, Chrome, IE9, ecc.Firefox 14 rompe l'effetto 3D "capovolgere la carta" - qualcuno sa perché?

Non riesco a pubblicare il sito su cui sto lavorando, ma questo sito è interrotto esattamente nello stesso modo - salta tra la parte anteriore e posteriore della scheda piuttosto che a rotazione

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

Qualcuno ha qualche idea?


EDIT: OK, probabilmente dovrebbe aver incluso più informazioni

sto usando questo plug-in per gestire la lanciando

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

Ho sbagliato quando ho ha detto che era la stessa tecnica di quel sito che sembra essere semplice CSS mentre questo plug-in è per jQuery. Ecco un link ad una demo ho buttato insieme

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


EDIT: Questo è come la query viene utilizzato:

$('#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'); 
       } 
      }); 

Il markup è simile al seguente:

<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

È rotto anche su FF 17a. –

+0

Sarebbe bello avere qualche esempio di markup e dove lo chiami, ma controllerò la fonte del plugin. –

+0

Ho aggiunto il markup e il jQuery adesso. Supponevo che non sarebbe stato necessario in quanto sarebbe il modo in cui FF ora gestisce le trasformazioni piuttosto che il plug-in – ollie

risposta

4

Questo è in realtà perché Firefox segue lates t standard. Da https://developer.mozilla.org/en/Firefox_14_for_developers

Come è stato rimosso dal progetto di norma, il supporto per l'inclinazione() funzione è stata rimossa da trasformare proprietà.

(Questo fa sì che l'intera dichiarazione -moz-transform è caduto.)

Invece di segnalazione bug a Bugzilla, direi che dovrebbe essere segnalato all'autore del plugin.

+0

Ha perfettamente senso perché la mia console continua a inviare spam 'Errore nel parsing value per 'transform'. Dichiarazione rilasciata costantemente. +1 per la bella scoperta. –

+0

Ok bello, ha senso (ma è più che un po 'fastidioso). Sei a conoscenza di un altro modo per simulare questo effetto 3D senza usare skew? – ollie

+0

@ollie Proverei le trasformazioni 3D, ma non li ho mai usati. Tieni presente che anche le modifiche alle trasformazioni 3D sono cambiate di recente, pertanto il supporto potrebbe variare. – duri

Problemi correlati