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

　　

版權聲明

翻譯的文章，版權歸原作者所有，隻用于交流與學習的目的。

原創文章，版權歸作者所有，非商業轉載請注明出處，并保留原文的完整連結。