transition、animation在macbook air上图片动画边缘抖动

示例：

 

BUG描述：

最近同事一项目中，产品提出在macbook air上，列表图片放大效果边缘出现抖动现象。在retina屏上没有此问题。

调试过程：

一、单独把结构分离。肯定是否由其余元素引发。

二、逐步添加结构。看是否有父级结构引发。

调试结果：

一、单独分离，不出现问题。

二、添加结构的过程当中，当遇到父级中包含

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