zoukankan      html  css  js  c++  java
  • 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();
    	    })
        }
    })
    

      

  • 相关阅读:
    Vue与Django数据交互
    Vue部分使用注意事项
    Node.js及npm详细安装教程
    vue组件实现简单的路由
    实现一个简单的marked编辑格式转换器部分功能
    Vue的父子组件数据传递
    Vue数据绑定
    [蓝桥杯][2013年第四届真题]错误票据
    历届试题 连号区间数
    [蓝桥杯][历届试题]蚂蚁感冒
  • 原文地址:https://www.cnblogs.com/wengxuesong/p/6019297.html
Copyright © 2011-2022 走看看