Draggable translateZ 0px causes child elements to blur

[BornToCreate 0 Likes (Newbie)]

Hello,

I am using the Greensock Draggable as a container with several child elements.

 

Now the css translate3d(Npx, Npx, 0px) is added to the the Draggable.

But the translateZ 0px causes every child element to be blured.

 

When I overwrite it with Developer Tools to 1px the elements arent blured anymore.

Is there a way to permanently add translateZ(1px)?

 

[Jonathan 5,176 Likes (Superhero)]

Hello BornToCreate, and Welcome too the GreenSock Forum!

 

What you are seeing is a browser bug, and not a GSAP bug. This is due to a browser bug that mostly affects webkit based browsers like Chrome webkit and Apple webkit. That is due to having that element render on the GPU, which puts that element on its own rendering layer. Then it  is made into some type of bitmap for the GPU. And then when the element is finished animating it is removed from its own rendering layer. That is why it becomes blurry, since this browser bug is more of a an anti-alias bug. But this is a standard behavior with webkit based browsers.

 

The bug has to do with the z-axis, even if at 0 for CSS 3D transforms. a couple of years ago you could just add perspective  or transformPersepective  along with transform-style: preserve-3d  to fix this bug. But that no longer works. So in order to fix this bug you must add force3D:false to your tweens or Draggable instance. Since force3D is set to "auto" by default.

 

GSAP Draggable Docs:

• force3D : Boolean - by default, 3D transforms are used (when the browser supports them) in order to force the element onto its own layer on the GPU, thus speeding compositing. Typically this provides the best performance, but you can disable it by setting force3D:false. This may be a good idea if the element that you're dragging contains child elements that are animating.

force3D is part of the GSAP CSSPlugin

• As of 1.15.0, force3D defaults to "auto" mode which means transforms are automatically optimized for speed by using matrix3d() instead of matrix(), or translate3d() instead of translate(). This typically results in the browser putting that element onto its own compositor layer, making animation updates more efficient. In "auto" mode, GSAP will automatically switch back to 2D when the tween is done (if 3D isn't necessary) to free up more GPU memory. If you'd prefer to keep it in 3D mode, you can set force3D:true. Or, to stay in 2D mode whenever possible, set force3D:false. See http://css-tricks.com/myth-busting-css-animations-vs-javascript/ for more details about performance.

Also in the future please setup a codepen demo example. This way we can help you better by seeing your code in context and live.

 

Here is a great video tut by GreenSock on How to create a codepen demo example:

 

 

Resources:

Draggable Docs: http://greensock.com/docs/#/HTML5/GSAP/Utils/Draggable/

CSSPlugin Docs: http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

 

 

[OSUblake 9,990 Likes (Superhero)]

Your blur answer should be pinned in both forums.

[Jonathan 5,176 Likes (Superhero)]

That would be very nice Blake! Since that question about why elements become blurry when transformed  gets asked at least once or more in a day in the forum My fingers and nubs would love that!