2020年1月29日 星期三

[密技]兩個解決CSS transform在chrome破圖+閃爍的方法

在chrome中使用CSS transform旋轉影像時可能會出現破圖+畫面閃爍的問題(在firefox則不會)

這可能是因為他沒有真正發揮到硬體(GPU)加速

這時有兩個解決方式

第一個,設定CSS:
.canvas1 {
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
   backface-visibility: hidden;

   -webkit-perspective: 1000;
   -moz-perspective: 1000;
   -ms-perspective: 1000;
   perspective: 1000;
}
設定完之後,圖片就回來了(但資源超出顯示卡負荷還是會有輕微破圖現象)

但是這樣旋轉到背面就看不見了,所以有第二個方法,設定CSS:
.canvas1   {
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
}

可是這樣子怎麼旋轉?

我的做法是,將子元素設定為0,將父元素設定其他數字。

範例:
for (var ll = 0; ll < o3DListLength; ll++) {
        var canvasC = getByid("3DDiv" + ll).getElementsByClassName("cornerstone-canvas")[0];
        var canvas1 = getByid("3DDiv" + ll);
        canvasC.style.cssText += '-webkit-transform: translate3d(' + 0 + ', ' + 0 + ', 0);';
        canvas1.style.cssText += '-webkit-transform: translate3d(' + 1 + ', ' + 1 + ', 0);';

    }
然後再設定旋轉:
canvas1.style.transform = "rotateY(" + degerrX + "deg) rotateX(" + degerrY + "deg)";

這樣就可以正常旋轉且不會破圖+畫面閃爍了

參考網站:
用CSS开启硬件加速来提高网站性能(转)

沒有留言:

張貼留言

有興趣或有疑問的歡迎提問與交流喔!!!