Solution to css3 transform transition jitter problem

transform: scale(); Scaling will cause jitter in IE browser

Transform scaling will cause jitter in IE browser. You can add a rotation while scaling.

like:

transform: scale(1.2);

Replace with:

transform: scale(1.2) rotate(0.1deg);

transform:translate(); offset will make the image or text blurry

Transform offset can also cause images or text to lose frame and become blurred. You can use clac to solve this problem.

like:

transform:translate(-50%);

Replace with:

transform: translate(calc(-50% + 1px));

clac is a calculated property of CSS3, which can be used in calculations in styles. The syntax of clac is: clac(number + number).注：這里“運算符號”兩端的空格不能少

Transform has compatibility. IE browser is only compatible with IE 9. The compatible writing method is:

transform:scale(1.2)rotate(0.1deg);
-ms-transform:scale(1.2)rotate(0.1deg); /* IE 9 */
-moz-transform:scale(1.2)rotate(0.1deg); /* Firefox */ 
-webkit-transform:scale(1.2) rotate(0.1deg); /* Safari and Chrome */ 
-o-transform:scale(1.2)rotate(0.1deg); /* Opera */

This is the end of this article about how to solve the CSS3 transform transition jitter problem. For more information about CSS3 transform transition jitter, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!