I have a DIV containing an image and 2 child elements, structured as follows:
<div id="main">
<div id="left"></div>
<div id="right"></div>
<img ... />
</div>
A 3D transform is being applied to #main in the following way:
'transform':'perspective(800px) rotateX(0deg) rotateY(60deg)';
Below is the CSS 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 previous/next image. Fade hover events are also set up on the left/right containers. The functionality works well in all browsers when the rotation degrees are set to 0.
However, there are some strange positioning issues in Opera and Chrome whenever a rotateX or rotateY is applied.
All other browsers seem to handle the events of the left/right divs in relation to the 3D transform without any problems. Nevertheless, in Opera and Chrome, the transforms appear to interfere with the triggering of mouseenter, mouseleave, and click events on the left/right divs.
To add to the complexity, the issue only occurs on one of the child elements. The side of #main that is positioned further away in 3D space experiences these problems. The DIV closest to the viewer still behaves correctly when hovered over.
Borders and colors have been added to each DIV, ruling out an actual positioning issue. Both DIVs display perfectly.
Shown below is a screenshot. The white border indicates #main. Within #main, you can see the 2 left/right DIVs. The problematic one (pushed back in space) has a white gradient. Each is outlined in purple. The foreground one in bright green functions flawlessly.
Any recommendations would be greatly appreciated. Everything works except in Opera and Chrome. Thank you!