transition、animation在macbook air上圖片動畫邊緣抖動，

transition、animation在macbook air片動畫邊緣抖動，
樣本：

 

BUG描述：

最近同事一項目中，產品提出在macbook air上，列表圖片放大效果邊緣出現抖動現象。在retina屏上沒有此問題。

調試過程：

1、單獨把結構分離。確定是否由其他元素引起。

2、逐步添加結構。看是否有父級結構引起。

調試結果：

1、單獨分離，不出現問題。

2、添加結構的過程中，當遇到父級中包含

margin:0 auto;

問題出現。

初步確定是由於此屬性的原因。

使用下面代碼

($(window).width()-1100)/2;//1100是頁面寬度121.5

確定原因可能是因為在普屏上0.5像素造成的。

故，把原外框樣式，添加以下代碼以確定是否判斷正確。

position:relative;left:-0.5px;

結果完美解決相關的問題。

但以上解決只能處理在螢幕寬度和主體寬度之差為奇數的情況，而且只在macbook air的safari瀏覽器，有以上BUG。

故只能用js進行處理。

最終解決方案:

代碼如下：

$(function(){     var ua=navigator.userAgent;    var isPCMac=ua.indexOf('Macintosh')>-1;    var isRetina=window.devicePixelRatio&&window.devicePixelRatio>1;function resizeWrapper(){var wwidth=1100;//$(".wrapper").width();var winW=$(window).width();if(winW>wwidth){var wleft=parseInt((winW-wwidth)/2);$('.wrapper').css({margin:'0 '+wleft+'px'});}}if(isPCMac&&!isRetina){    resizeWrapper();    $(window).resize(function(){         resizeWrapper();    })    }})