More than 5 years have passed since last update.

ChromeでCSS Transform使用時にエッジがジャギった時

HTML5
CSS3

Posted at 2014-10-20

chromeでcss transformを使用して、要素の傾きなどを変更すると
エッジがジャギる時がある

##sample code

#test {
	 -webkit-transform: skewY(-9.5deg);
       -moz-transform: skewY(-9.5deg);
        -ms-transform: skewY(-9.5deg);
            transform: skewY(-9.5deg);    
}

chrome

safari

firefox

解決方法

該当要素に -webkit-backface-visibility: hidden;をいれることで解決する。

#test {
	 -webkit-transform: skewY(-9.5deg);
       -moz-transform: skewY(-9.5deg);
        -ms-transform: skewY(-9.5deg);
            transform: skewY(-9.5deg); 
	 -webkit-backface-visibility: hidden;   
}

chrome

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up