CODEWITHSUNDEEP
csswebkitcss-transforms
jtbandes
jtbandes

Reputation: 118671

Flickering/rendering issue with -webkit-transform

I'm experiencing a strange issue with -webkit-transform. If I use perspective and rotateX to make an element "flip up", if the element is tall enough, it flickers or does not render at all past a certain angle.

I've set up a jsFiddle demo which illustrates the problem. Move the mouse left and right to rotate the rectangle.

What's going on here? Is there a workaround or should I be filing a WebKit bug?

(Note: I see this behavior in both Safari and Chrome on OS X.)

Upvotes: 1

Views: 955

Answers (1)

Daniel
Daniel

Reputation: 126

The problem with this code is in the CSS3 perspective property. When the element is 4000px in height or more is disappears when it gets nearer the screen, because it is only 500px away (defined with the perspective property.
There, if the element is higher, the element should be further away.

I made some if-statements to get the different perspectives depending on the elements height:

if (document.getElementById("m2").offsetHeight == 400) {
    document.getElementById("m2").style.webkitTransform = "perspective(500) rotateX(" + (e.clientX / 5) + "deg)";
}

if (document.getElementById("m2").offsetHeight == 4000) {
    document.getElementById("m2").style.webkitTransform = "perspective(5000) rotateX(" + (e.clientX / 5) + "deg)";
}

if (document.getElementById("m2").offsetHeight == 40000) {
    document.getElementById("m2").style.webkitTransform = "perspective(50000) rotateX(" + (e.clientX / 5) + "deg)";
}

Upvotes: 3

Related Questions