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

示例：

BUG描述：

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

调试过程：

1、单独把结构分离。确定是否由其他元素引起。

2、逐步添加结构。看是否有父级结构引起。

调试结果：

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

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

1	margin:0 auto;

问题出现。

初步确定是由于此属性的原因。

使用下面代码

1 2	($(window).width()-1100)/2;//1100是页面宽度 121.5

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

故，把原外框样式，添加以下代码以确定是否判断正确。

1 2	position:relative; left:-0.5px;

结果完美解决相关的问题。

但以上解决只能处理在屏幕宽度和主体宽度之差为奇数的情况，而且只在macbook air的safari浏览器，有以上BUG。

故只能用js进行处理。

最终解决方法:

代码如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

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

　　

• 导航

版权声明

翻译的文章，版权归原作者所有，只用于交流与学习的目的。
原创文章，版权归作者所有，非商业转载请注明出处，并保留原文的完整链接。