Incorrect positioning of Child Elements in 3D Transform

I currently have a DIV with an image and 2 children, like so:

<div id="main">
   <div id="left"></div>
   <div id="right"></div>
   <img ... />

I'm applying a 3D transform to #main like so:

'transform':'perspective(800px) rotateX(0deg) rotateY(60deg)';

Here's the CSS I have for left/right:

#left, #right {width:50%;height:100%;position:absolute;z-index:999999;}
#right {right:0;}

Clicking on either left or right will navigate to the prev/next image. I also have some fade hover events setup on the left/right containers. It works good works well in all browsers when the rotation degrees are 0.

However, whenever I apply a rotateX or rotateY it has some odd positioning problems in Opera and Chrome only.

All other browsers seem to handle the events of the left/right divs relative to the 3D transform just fine. However in Opera and Chrome, the transforms seem to mess with the triggering of the mouseenter,mouseleave and click events of the left/right divs.

To make this even more strange, it will only happen on one of the child elements. Whatever side of #main is positioned farther away in 3D space presents problems. The DIV that is closest to the viewer will still hover just fine.

I've also added borders and colors to each DIV, and it isn't an actual positioning issue. Both DIVs show up perfectly.

Here's a screenshot. The white border is applied to #main. Inside #main you can see the 2 left/right DIVs. The problematic one (pushed farther back in space) has a white gradient. I've applied a purple border to each one. The foreground one in bright green works perfectly.

Any suggestions would be awesome. Works in everything except Opera and Chrome. Thanks!


Ok, so finally figured this out and will hopefully help others.

When working in 3D space certain browsers will correctly intersect/clip other elements. Safari is one of these browsers. When rotating an element in 3D space like in the screenshot above, the actual #main is intersecting with the background element. The correct way a browser should handle this is by clipping off the part that goes "into" the element behind it. However, the majority of browsers do not show clipping and will instead show the transformed element (although it's intersecting another element) like in the screenshot above. Safari, however correctly handles this and would clip off the part of #main where it intersects the background.

For whatever reason, Chrome and Opera still show #main when clipping occurs, however any events that are bound to the transformed element will not be fired because you're hovering over the background element, and not the element that has been transformed.

All other browsers that don't clip transformed elements will fire events on those transformed elements.

The solution is to adjust the Z axis of the transformed element.

Need Your Help

PNCTL not enabled in php even after compiling

php pcntl process-control

I just compiled my PHP with --enable-pcntl, but when I try to access the process control functions in PHP, I get:

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.