monolith920
11/10/2017 - 7:56 PM

Webkit & Safari text transition issue

reference https://www.youtube.com/watch?v=9Woaz-cKPCE&hd=1

The problem is that the text is rendering through the cpu but when the transition happens it is sent to the gpu to be re-rendered causing the text effect.

webkit-safari-transition-fix.css
content_copyfile_download
.transitioning-element {
    position:relative; /* Add a high z-index position to hide the gpu conversion of text */
    z-index:1;
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -o-perspective: 1000;
    perspective: 1000;
}

.transitioning-element:hover {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
}