CSS3D text renders poorly in Microsoft Edge

Before I start, I’m pretty confident this is an issue with how the Edge browser scales CSS3D elements, and not with THREE JS itself. When I render something with the CSS3DRenderer it looks great in pretty much everything except for Edge.

In Edge, it looks like this.

Now, I’m not scaling the DOM element up at all, I’m actually making it about 1/10th of the original size to fit inside the view of the camera. Is there some Microsoft-specific CSS declaration I should look at?

If I remove the “translateZ()” declaration on the camera DIV it renders perfectly in all browsers, but then the object is like 1000 units ahead in z-space and doesn’t move with the rest of the scene. Am I stuck waiting for Microsoft to fix this one?

Can you please share the URL that produces the shared screenshot? :innocent:

Not easily at the moment (it’s a client project), but I can put together an example tomorrow to share.

Not sure if it means anything but I found out disabling “transform-style: preserve-3d” makes the text render perfectly fine.