Scale property not acting on chrome as for ff/ie

[lovezjk]

Hi, i'm trying to scale an image from 50% 50% origin point (zooming effect) and fading it 3s after homepage is loaded, and chrome seems not working as others browsers.

 

http://easy-creation.com/charrette/

 

I also tried to set('.slide:first', {transformOrigin:"50% 50%"}) before (as chrome as not same defaults), but only vertical origin is taken in count.

 

Have an idea ?

[Rodrigo]

Hi and welcome to the GreenSock forums.

 

What you could try is add the transformOrigin to the same config object that has the scale in it.

fx.to('.slide:first', 3, {scale:2, transformOrigin:"50% 50%", delay:3, ease:Power4.easeOut});

But it strikes me as unusual, due to the fact that by default the transform origin of any element is the center point.

 

Also please take a look at this post in order to see if you can create a reduced live sample with code we can easily test:

 

http://forums.greensock.com/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Rodrigo.

[lovezjk]

In my code i already set() the transform origin (but i tried to put the property directly in to() also).

 

Maybe its the same bug as reported there ?

http://stackoverflow.com/questions/18894314/in-chrome-transform-origin-is-invalid

[GreenSock]

This is unrelated to GSAP - it's a difference in how the browsers are determining the width of the element you're scaling. For example, type this in the console:

$(".slide")[0].offsetWidth; //"0" in Chrome, "996" in Firefox

So if Chrome thinks it's 0 pixels wide, imagine where the origin would be. 50% of 0 is 0, so it'd be in the far left. 

 

You should be able to adjust your CSS so that the element has the proper width.

 

[lovezjk]

You're right, first time i see this behavior, i was guessing the parent div would refresh his size with the child's one when loaded.

It works now. Thanks.