3

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)

Brian
  • 2,819
  • 4
  • 24
  • 30

2 Answers2

4

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.

rgthree
  • 7,217
  • 17
  • 21
  • I did simplify it a lot, but my jsfiddle still showed the bug on my side, (Although in my case, it only shows up in Windows, Mac seems fine) I see your example works just fine, but I think another issue which I didn't mention is the background rotating element has a background IMAGE. In this case: http://jsfiddle.net/cehzd/2/ I added a gradient (think it acts the same as bg image) and you can see it'll cut flat or not. :/ – Brian Feb 10 '12 at 20:02
  • 1
    Sorry, I should have mentioned: No longer should you be applying the `rotateY` to the `section` _(the section holds the perspective for it's children to rotate)_, but rather the `h1` inside. Therefore, put your background on the `h1`. Like this: http://jsfiddle.net/rgthree/cehzd/3/ – rgthree Feb 10 '12 at 20:34
  • Thanks a ton. I still had the bug on my real site but copied your HTML in the sense that the foreground element needed to be SIBLING of the perspective container, that THEN contained rotating child. Phew! Would of never figured that one out! :D – Brian Feb 10 '12 at 22:08
0

I would simply add a transform: translateZ(100px); to the container in the foreground where 100px is the width of the blue container divided by 2 as its transform-origin is the default 50% 50%. It wouldn't have the same effect as transform: scale(...); as long as the outer wrapper doesn't have a transform-style of preserve-3d.