image element + clip path + scale transition = chrome bug?

[szx]

I seem to have run into a peculiar bug (?) in chrome. Check this out:

http://tributary.io/inlet/5193505

...and notice the neat yet unintentional wiggling effect. Does not happen in Safari (though it exhibits other issues, namely nasty clipping artifacts).

I'm stuck and would appreciate any hints on how to solve this. Thanks!

[szx]

ok, apparently this has nothing to do with clipping or translating: http://tributary.io/inlet/5193683

merely scaling the image results in wiggling.

[Ian Johnson]

i think it's because of precision and the x,y coordinates. if you make x and y = 0, then there doesn't seem to be a wiggle.

i don't know what the root of the problem is or how to fix it though...

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--
Ian Johnson - 周彦

http://enja.org

[szx]

it's definitely a precision thing. the bigger the image, the less of a problem it is. unfortunately settings x,y to zero is not an option because then it's scaling off-center.

any ideas for workarounds?

[szx]

https://bugs.webkit.org/show_bug.cgi?id=105300

Animating a transform property (scale, translate etc.) of a bitmap image is shaky. The wobble as it transforms is pretty uncomfortable to view.

bingo...

[Ian Johnson]

One workaround would be to animate the x,y,width and height manually with an attrTween. This way you could always round to the nearest pixel.

[szx]

Update: a little digging around in ImageSkia's source code revealed this gem: "this code is only used when the canvas transformation is limited to scaling or translation."

So this is a total hack, but it works - add a rotate(0.0001) to your transform and the problem goes away! Victory.

[Ian Johnson]

wow. brilliant! haha. thanks for sharing the find

[Oksana Myazina]

This hack does not work in the current version Google Chrome 38.0.2125.111 m.  And this problem is not only with the image. It happens with any element that is inside the element with the clip-path. 

Понеділок, 25 березня 2013 р. 01:38:22 UTC+2 користувач szx написав:

So this is a total hack, but it works - add a rotate(0.0001) to your transform and the problem goes away! Victory.

On Tuesday, March 19, 2013 12:12:22 PM UTC-4, Ian Johnson wrote:
One workaround would be to animate the x,y,width and height manually with an attrTween. This way you could always round to the nearest pixel.
On Mar 19, 2013 8:45 AM, "szx" <zsh...@gmail.com> wrote:
https://bugs.webkit.org/show_bug.cgi?id=105300 

bingo...
On Tuesday, March 19, 2013 10:05:43 AM UTC-4, szx wrote:
any ideas for workarounds?
On Tuesday, March 19, 2013 1:01:46 AM UTC-4, Ian Johnson wrote:
i think it's because of precision and the x,y coordinates. if you make x and y = 0, then there doesn't seem to be a wiggle.
i don't know what the root of the problem is or how to fix it though...

On Mon, Mar 18, 2013 at 9:20 PM, szx <zsh...@gmail.com> wrote:
merely scaling the image results in wiggling.

On Monday, March 18, 2013 11:36:22 PM UTC-4, szx wrote:
I seem to have run into a peculiar bug (?) in chrome. Check this out:

...and notice the neat yet unintentional wiggling effect. Does not happen in Safari (though it exhibits other issues, namely nasty clipping artifacts).
I'm stuck and would appreciate any hints on how to solve this. Thanks!
--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 


--
Ian Johnson - 周彦
http://enja.org 
--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

Update: a little digging around in ImageSkia's source code revealed this gem: "this code is only used when the canvas transformation is limited to scaling or translation."

Animating a transform property (scale, translate etc.) of a bitmap image is shaky. The wobble as it transforms is pretty uncomfortable to view.

it's definitely a precision thing. the bigger the image, the less of a problem it is. unfortunately settings x,y to zero is not an option because then it's scaling off-center.

ok, apparently this has nothing to do with clipping or translating: http://tributary.io/inlet/5193683 

http://tributary.io/inlet/5193505