Question

I have an element that is positioned absolutely above another. The thing is the background element has a little JS to rotate on the Y axis depending on the mouse’s movement. Unfortunately, I am seeing an issue in Safari that doesn’t appear in Firefox or Chrome.

http://jsfiddle.net/cehzd/2/

The background element cuts up through the foreground one, and I’d like to know if there is anything to prevent this, or have it behave like Firefox.

Edit: Updated example to include background image (gradient) which is more exact to what I see in my site. This bug does show up on both Windows and Mac (unlike previous example, sans background image, which was only on Windows)

Answer 1

There’s definitely a bug, but I had to change your JSFiddle quite a bit. (Did you strip too much from your actual code?). I was able to recreate your issue by using -webkit-transform-style: preserve-3d; while not using it (or making it flat) fixes the “cut” in my code.

Take a look at this JSFiddle with my version of the bug (commented out) and the fix. Notice that applying that -webkit-transform-style: preserve-3d; does create your bug in Safari (Mac) while not in Chrome: http://jsfiddle.net/rgthree/cehzd/

Hopefully that helps.