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

  

转载于:https://www.cnblogs.com/wengxuesong/p/6019297.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值