长沙web培训
达内长沙侯家塘中心

15017569023

热门课程

在图片动画边缘抖动

  • 时间:2016-11-07 10:19
  • 发布:长沙web培训
  • 来源:web教程

长沙Web前端培训机构的老师今天给大家讲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();

})

}

})

上一篇:前端HTML:列表元素
下一篇:菜单展开关闭

马上预约三天免费体验课

姓名:

电话:

javascrip的数据类型和变量

ajax前后端数据交互

javascipt的函数表达式

菜单展开关闭

选择城市和中心
贵州省

广西省

海南省