Intersecting planes should clip. The behavior on the right is correct.
While working on a CSS3 tool we bumped into a nasty little bug with CSS3 3D Transforms. This bug is seen when two planes intersect.
When two planes intersect they should be “clipped”. This means that parts of the faces become invisible – as if the two faces were going through each-other. Unfortunately this is broken in Mozilla Firefox and Google Chrome. Apple gets it right with Safari on their desktop and their iOS devices.
Track the bug
If you want to follow what happens with these bugs, you can track them with Google and Mozilla using the following links.
Mozilla Firefox Bug Report
Google Chrome Bug Report
Try the Code
You can test this code out now using the live demo by clinking on the link below. Try using Firefox, Chrome or Safari and see the difference in the output.
3D Transform Plane Clipping Bug – Live Demo
