Fix Firefox z-sorting issues.

[keithclark]

This PR addresses the Firefox glitching issues in demo 5.

Firefox's sorting of z-transformed elements is pretty awful. Creating a scene that renders correctly often relies on balancing transforms along the z axis with z-index and (in this case) DOM order. This "fix" moves the track into it's own element and places it after the other elements in the scene — in Firefox this will cause the track element to render underneath the other objects, preventing the glitching. If you move the element to the top of the scene you'll see the glitching again.

I've made the track an <img> element but there's no reason not to use a CSS background instead.

Something else you should be aware of; Firefox won't try to depth sort anything if there are more than 100 descendant elements in your 3D scene. Once you hit that magic number you'll have to sort the elements yourself by shifting them around in the DOM, which will kill performance. You can see this issue in my old CSS lighting demo. Try using the DOM inspector to remove elements until the x-wing renders correctly.

[xem]

amazing! it works perfectly! Thanks a lot for the explanations, I'll add them in my tutorial :)
is there a Firefox issue on a bugtracker somewhere for this problem?

[xem]

For the record, here's a video of the problem solved by this issue: https://twitter.com/MaximeEuziere/status/782996905840304129

[xem]

and more recently: https://twitter.com/MaximeEuziere/status/883419842203832321

[keithclark]

It's also worth noting that the 100 element limit I referred to in the original post is no longer an issue in Firefox 🎉