z-translate results in blurring of a text in chrome

[Qvatra]

I've read that blurring of a text in a chrome is known issue so the question is about possible workarounds?

I simply want to bring closer a surface that contain some text.

P.S: I did test in safari, IE and firefox - same issue.

[michaelobriena]

We have some resources on that problem. Looking for them today.

[michaelobriena]

So, after looking through out stuff, it looks like every browser except firefox has this issue. There is no good way around this problem right now aside from just not scaling text. You can use perspective to bring it closer to the camera but that is about it.

[Qvatra]

so it is browser related issue and not famo.us? Is it possible to fix this issue by the following algorithm?:

1. translate container closer to the front (so the projection would be bigger and text would be blurred)
2. at the same time scale the container (make it smaller) so projection size will remain the same is initial (so text still will be not blurred). This will result in actual transition without blurring but also without changing the size of projection.
3. next step is to scale the container (make it bigger) and at the same time make bigger the font size inside this container using transitionables.

In theory if you will do this transforms at the same time it should mimic z-transition without blurred text. Am I right?

Is that a solution? Would it be possible to implement this 'workaround' in famo.us so people would be able to use z-transitions of surfaces with text.

[michaelobriena]

I think it is worth a try. For what it is worth, when I had an initial scale of the intended final scale, then scaled down, then scaled back up, the result still was pixelated even though the font rendered properly with that scale at page load.

[Qvatra]

I have tried to implement my idea about workaround and here is the result:

https://ozinchenko.wordpress.com/2015/02/04/how-to-avoid-blurring-of-the-text-in-famo-us-during-transition-in-z-direction/

The only problem is that it seems like concurrent transitions are async for some reason so we have some trimming... But the font is not blurred anymore.

Why I have the trimming effect here?