perspective + preserve3d + transform-origin + (rotateX || rotateY) + translateZ = fuzzy badly scaled perspective rendering

• Component: Layout and Rendering
• Status: NEW ---

[Adam Argyle]

On many other browsers but Safari and iOS 8 Webkit, the demo link above renders as expected. It's a 3D cube simulation, that rotates faces around a center axis point. But when opened in Webkit, the CSS for some reason causes the effect to scale and burst out of the viewport element. Causing fuzzy text due to up-scaling. Removing `transform-style:preserve-3d` fixes the outburst, but ruins the 3D effect. I feel the DOM structure and applied CSS are done properly, so I'm very unsure of what to do next to resolve this issue. I've seen other developers complaining about similar things around the web, but nothing was specific enough for me to piggy back on. The provided demo url is un-obfuscated, so should be easy for you to scrub for architecture mistakes.