Tek pozisyonlarda hareket ederken görüntüleri Chrome'da sallayarak

Question

Bir görüntünün merkezden görüntülenebildiği bir tür maskeleme animasyonu yaratmaya çalışıyorum (düzenleme: "merkez", gerçek arka planın merkezi anlamına gelmez görüntü, ancak görünen alanın merkezi! /edit). Şimdiye kadar gayet iyi çalışıyor, tek sorun, Chrome'da (şu an Windows 7 x64'te 24.0.1312.52m) ortaya çıkan içeriğin titriyor olmasıdır. Şimdiye kadar bu background-repeat (http://jsfiddle.net/BaKTN/1/) devre dışı bırakmadığını ile tespit edilebilir öğrendim ettik http://jsfiddle.net/BaKTN/

:

İşte bir jsfiddle örnek. Dahili olarak tam olarak ne olduğundan emin değil, ama bu görüntüyü ait olduğu yerde kalıyor. Ne yazık ki, problemin sadece yarısı budur, dış kabın tek koordinatlara yerleştirilmesiyle tekrar okkotlar çalkalanır, örneğin yüzde bazında konumlandırma kullanıldığında meydana gelir (en azından dahili olarak koordinatlar garip olabilir). Garip her şey yolunda görünüyor koordinatları sabit konumlandırma kullanarak bile neden olacak daha dış kapları ile yardım edecek gibi gözüküyor http://jsfiddle.net/VbgXB/

düzenleme:

İşte bu davranışı gösteren başka jsfiddle örnek. Bununla birlikte, bu geçici çözüm yalnızca koşullu olarak yararlıdır, çünkü kaydırma işlemini bozar: http://jsfiddle.net/BaKTN/5/. Yani hala başka bir numara arıyorum. /edit

Aslında bu soruna neden olan ve kapsayıcı koordinatlarını değiştirmeden nasıl atlatılacağı hakkında bir fikriniz var mı? Bunun şu hatayla bir ilgisi olabilir: http://code.google.com/p/chromium/issues/detail?id=140038?

ps. Lütfen bunun CSS2 uyumlu kalması gereken daha büyük bir animasyonun (çok fayans) bir parçası haline geldiğine dikkat edin!

Answer 1

Bu, arka plan konumu için kısmen piksel değerlerinden kaynaklanıyordur. değerleri Yuvarlama düzeltmek gibi görünüyor: 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 = []; 

İlgili kod

 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]; 

sonu İlgili kod

 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); 

Düzenleme — senindönüştürme yerine ikinci durumda çözecektir yüzdeleri (bütün) pikselpozisyon, ancak pencere yeniden boyutlandırıldığında konumunu ayarlamak olmaz: http://jsfiddle.net/VbgXB/1/

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