Bug 140415 - perspective + preserve3d + transform-origin + (rotateX || rotateY) + translateZ = fuzzy badly scaled perspective rendering
Summary: perspective + preserve3d + transform-origin + (rotateX || rotateY) + translat...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: 525.x (Safari 3.2)
Hardware: iPhone / iPad iOS 8.1
: P2 Normal
Assignee: Simon Fraser (smfr)
URL: http://argyleink.github.io/N-Gon/#
Keywords:
Depends on:
Blocks:
 
Reported: 2015-01-13 15:27 PST by Adam Argyle
Modified: 2015-01-14 09:56 PST (History)
1 user (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Adam Argyle 2015-01-13 15:27:40 PST
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.