joshregandev Posted June 25, 2014 Share Posted June 25, 2014 Hi, first post! Been trying to figure this one out for ages. I'm trying to find out if anyone knows of any drawbacks or issues when using CSS transforms on a canvas or an element that has a canvas as a child, specifically applying a CSS scale transform. I have a combination of canvas and DOM images and I'm having some serious issues with flickering and partially drawn images when running in Chrome on the Galaxy S3 and Note 2 . I've looked into the possibility that -webkit-perspective or -webkit-transform-style: preserve-3d might be the cause but add/removing them hasn't made any real difference and I'm only using a 2D transform. Any help with this would be greatly appreciated! Many thanks. Quote Link to comment Share on other sites More sharing options...
harrywatson Posted June 26, 2014 Share Posted June 26, 2014 Hi there, hey um, I'm not sure I understand your difficulty but I would tend to 'overlay' a div onto the canvas and use css transforms with the non canvas div and use javascripton the canvas.<style>#canvas-holder{ margin: 40px auto 0px auto; width: 600px; height: 480px; border: 1px solid;}#notacanvas{ position: absolute; z-index: 3;}#stagecanvas{ position: absolute; z-index: 0;}</style></head><body onload="init()"><div id ="canvas-holder"><div id="notacanvas" width="600" height="480"><!--css transforms applied here--></div><canvas id="stagecanvas" width="600" height="480"></canvas></div><!--end canvas holder--> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.