Draggable render issue

[MIC74 0 Likes (Newbie)]

 

hi,

i'm having a problem when using draggable and then scaling objects with css transforms:

everything works fine so far, but the scaled div gets blurry after scaling. first i thought it's a browser problem, but when leaving draggable away, the rendering works as expected and the div's text looks sharp again, no matter what scaling factor is used. when using draggable, it seems to me, that the browser treats the scaled object as an image...

maybe there's the possibility to force the browser to re-render?

 

would be nice if there's any workaround ;-p

 

thanks!

 

michael

[GreenSock 8,117 Likes (Superhero)]

I'm pretty sure Draggable has nothing to do with it. However, by default it does enable "force3D" which just means that 3D transforms are used instead of 2D ones, like transform:translate3d(10px,0,0) instead of transform:translate(10px,0) because in most browsers those perform much better and offload the compositing from the CPU to the GPU. I wonder if on your system the GPU is deciding to scale the pixels up, but again that's more of an issue with the browser and GPU rather than Draggable. You can disable the force3D thing if you want by simply passing force3D:false into your Draggable, like:

Draggable.create("#yourID", {force3D:false, ... });

Does that resolve things for you? 

[MIC74 0 Likes (Newbie)]

 

hi jack,

great, force3d:false is the solution!

thank you!!!

 

michael

[MIC74 0 Likes (Newbie)]

 

hmm, ok, force3d:false makes everything looking crisp but like you said, performance isn't as good as with force3d:true. especially on mobile. would be cool, if one could "toggle" force3d-mode so that it's only on false when the animation is over...

[GreenSock 8,117 Likes (Superhero)]

You can toggle it anytime.

TweenLite.set("#yourElement", {force3D:true});

[MIC74 0 Likes (Newbie)]

 

awesome!

that's it.

 

tanks again!