Scuotere immagini in Chrome durante l'animazione su posizioni dispari

Question

Sto provando a creare una sorta di animazione di mascheramento in cui un'immagine viene rivelata dal centro (modifica: "centro" non significa necessariamente il centro dello sfondo reale immagine, ma il centro dell'area visibile! /edit). Funziona fino ad ora, l'unico problema è che in Chrome (attualmente 24.0.1312.52m su Windows 7 x64) il contenuto rivelato sta scuotendo.

Ecco un esempio jsfiddle: http://jsfiddle.net/BaKTN/

Finora ho scoperto che questo può essere risolto disattivando non background-repeat (http://jsfiddle.net/BaKTN/1/). Non sei sicuro di cosa succede esattamente internamente, ma questo fa sì che l'immagine rimanga al suo posto. Sfortunatamente questa è solo metà del problema, si agita di nuovo quando il contenitore esterno è posto su coordinate dispari, cosa che può accadere ad esempio quando si usa il posizionamento basato sulla percentuale (almeno internamente le coordinate potrebbero essere dispari).

Ecco un altro esempio che mostra questo comportamento jsfiddle: http://jsfiddle.net/VbgXB/

edit: Utilizzando posizionamento fisso sembra aiutare, anche con contenitori più esterne che potrebbero causare coordina strano tutto sembra a posto. Tuttavia, questa soluzione alternativa è ovviamente utile, dal momento che comporterà lo scorrimento: http://jsfiddle.net/BaKTN/5/. Quindi sto ancora cercando un altro trucco. /edit

Qualche idea su cosa sta effettivamente causando questo problema e su come aggirarlo senza modificare le coordinate dei container? Questo potrebbe avere a che fare con questo errore: http://code.google.com/p/chromium/issues/detail?id=140038?

ps. per favore nota che questo è diventato parte di un'animazione più grande (più tessere) che deve rimanere compatibile con CSS2!

Answer 1

Ciò è probabilmente dovuto a valori di pixel parziale per la posizione dello sfondo. A completare i valori sembra risolvere il problema: http://jsfiddle.net/BaKTN/2/

(function($) { 
    $.extend($.fx.step,{ 
    backgroundPosition: function(fx) { 
     if (typeof fx.end == 'string') { 
     var start = $.css(fx.elem,'backgroundPosition'); 
     start = toArray(start); 
     fx.start = [start[0],start[2]]; 
     var end = toArray(fx.end); 
     fx.end = [end[0],end[2]]; 
     fx.unit = [end[1],end[3]]; 
     } 
     var nowPosX = []; 

relativo codice

 nowPosX[0] = Math.round(((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0]) + fx.unit[0]; 
     nowPosX[1] = Math.round(((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1]) + fx.unit[1]; 

Fine relativo codice

 fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1]; 

     function toArray(strg){ 
     strg = strg.replace(/left|top/g,'0px'); 
     strg = strg.replace(/right|bottom/g,'100%'); 
     strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2"); 
     var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/); 
     return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]]; 
     } 
    } 
    }); 
})(jQuery); 

Modifica — Convertire la vostra #container grado di (interi) pixel invece di percentuali risolverà il secondo caso, ma non sarà regolare la sua posizione quando la finestra viene ridimensionata: http://jsfiddle.net/VbgXB/1/

var $con = $("#container"); 
$con.css({ 
    left: Math.round($con.position().left), 
    top: Math.round($con.position().top) 
});