CSS3DRenderer: Modify perspective transform to avoid issues in Chrome and Firefox

[donmccurdy]

Related:

• CSS3DRenderer: Transforms broken depending on container size and position #26950
• CSS3DRenderer interactive blind spot #26583

Description

As described in #26950, Chrome, Safari, and Firefox all have slightly different issues rendering HTML elements positioned with CSS 3D transforms. I've reported bugs to Chrome and Safari, but some similar issues have been open for a while. My approach with this fix was to try slightly different CSS syntax that seemed like it should do the same thing, and see if any alternatives would side-step the browser issues.

This solution avoids the issues in Chrome and Firefox, leaving only the original issue in Safari. When the container has even-numbered pixel width and height, Safari renders correctly as well.

References on perspective: XXpx vs. transform: perspective(XXpx):

• https://jsfiddle.net/donmccurdy/2fq87d0c/
• https://css-tricks.com/almanac/properties/p/perspective/

This contribution is funded by The New York Times.

[Mugen87]

/cc @yomotsu

[Mugen87]

https://rawcdn.githack.com/donmccurdy/three.js/hotfix/css3drenderer-perspective/examples/index.html?q=css

[Mugen87]

Ref: #26950 (comment)

I'm not sure yet if there is a downside.

I have tested your branch with some examples on Chrome, Firefox and Safari and couldn't see any regressions so far. Still, should we target r159 for this change so we have more time for testing on dev?

[mrdoob]

I think this can go in already 👍

[donmccurdy]

Thank you for the additional testing @Mugen87!