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

时间 2019-11-10

标签 transition animation macbook air 图片动画边缘抖动栏目 MacBook 繁體版

原文原文链接

示例：

BUG描述：

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

调试过程：

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

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

调试结果：

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

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

问题出现。post

初步肯定是因为此属性的缘由。学习

使用下面代码spa

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

导航

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