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

導航

翻譯的文章，版權歸原做者全部，只用於交流與學習的目的。原創文章，版權歸做者全部，非商業轉載請註明出處，並保留原文的完整連接。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。