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

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