Draggable and Scale

[Dean Mann]

I am using draggable on a div containing svg elements

 

If I dont use draggable and scale the div via:-

var i = $('#chart');

TweenLite.to(i, 2, {scale:4});

 

The edges of the SVG text and circle etc remain crisp as you would expect from scaled vectors.

 

However if I enable draggable via:-

var aD = Draggable.create("#chart", {type:"x,y", edgeResistance:0.5, throwProps:true, bounds:window});

 

and then zoom the SVG element become fuzzy as though they were scaled pixels.

 

This happens even if I disable draggable before scaling

 

Any ideas why this might be?

Thanks - Dean 

 

Update: Scale without Draggable uses -webkit-transform: matrix(...

Scale with Draggable uses -webkit-transform: matrix3d(...

 

using Safari and Chrome on Mac - not a problem on Firefox (not using webkit)

 

Ah: Putting force3D:false as in:

TweenLite.to(i, 2, {scaleX:4, scaleY:4, scaleZ:1, force3D:false});

 

Is their a reason for the problem with matrix3d and scale on webkit?

solves the problem

Edited August 22, 2013 by Dean Mann

[GreenSock]

By default, Draggable sets force3D:true because:

1. Whenever an element has a 3D transform on it, the browser (at least most browsers) will create a distinct layer on the GPU for that element which makes compositing much faster thereafter. This can result in a pretty significant speed boost. 
2. When an element has a 3D transform, the browser typically doesn't force pixel snapping, meaning it'll do sub-pixel rendering, making motion appear smoother. 

It sounds like in your case, the browser was creating a texture layer and just having the GPU scale that (meaning the pixels just got bigger when you scaled up). GSAP can't control that - it's a browser thing. One potential solution is to make the original element be larger, and scale its initial state down so that it's scrunching the pixels at the beginning, and then when you scale up, it's actually at normal scale, thus the "captured" state has more pixel data. 

 

You can tell Draggable not to force 3D if you want - just pass "force3D:false" in the config parameter. But again, the down side is that you may see a slight performance hit (which, again, is not caused by GSAP - it's a browser thing). 

 

Does that help?

[Dean Mann]

Yes thank you, I am setting to force3D to false just now to permit scale without loss of detail.

 

I tried making original element larger and scaling down it works but causes a problem with the complex dynamic visualisation I am running on the div being scaled and dragged

 

I understand it is a browser issue

 

Thanks for your time