Jump to content
Search Community

Chrome handling image strange

Wigchert test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hey!

 

First of all, this isn't an animation or tween problem but as there is no other Javascript section, I'm posting it here.

 

Also I'm not entirely sure that it is caused by TweenLite but it is happening in my TweenLite line of code. I have an image and I want to generate a reflection effect for it so I duplicated the image, mirrored it and reduced the opacity through TweenLite (makes it so much easier!). In all browsers I have tested it so far it works fine (including IE7) but in Chrome it's behaving weird.

 

The reflecting image is at the bottom of my page and should partially exceed the bottom border of the DIV it is in. What Chrome does is that the image itself does not go further down than the border of the content div but the canvas or area of the image does go down. This results in clipping the image.

 

This could be an issue with the css I'm applying with the TweenLite line or it could be the way TweenLite handles it. If I comment out the line with where the TweenLite css is set, it gets positioned over the border just fine, but obviously without the right css attributes.

 

Here is the Jsfiddle:

http://jsfiddle.net/qTE2m/

 

here are screenshots of what I mean:

 

Chrome:

http://puu.sh/1xI15

 

FireFox:

http://puu.sh/1xI24

 

The black line at the bottom is the border of the div the image is in.

Link to comment
Share on other sites

Congratulations - you found a bonafide Chrome bug. When you use a negative bottom margin on an element that has a transform matrix applied that has a negative 4th element and zero for the 2nd and 3rd elements, Chrome just moves the box (not its contents) with the negative bottom margin (that's why you see the clipping effect). Pretty funky, huh?

 

So to be clear, this is NOT a bug in CSSPlugin or GSAP at all - it's a browser issue.

 

The solution would be to add a tiny bit to the rotation so that it's not exactly 180 (that will cause the matrix values to be non-zero for the 2nd and 3rd elements). So maybe use 179.9. Visually you won't be able to tell a difference.

 

Of course you could just not use a negative margin, but I think that'd probably be more difficult for you.

 

For example, look at this CSS:

//BREAKS:
#problem {
   bottom:-12%;
   -webkit-transform:matrix(1,0,0,-1,0,0);
}
//WORKS:
#problem {
   bottom:-12%;
   -webkit-transform:matrix(1,0,0.000001,-1,0,0);
}

 

 

Does that clear things up?

 

By the way, thank you for providing that jsfiddle link and the screen shots - those were VERY helpful in quickly identifying the issue. I wish all forums members were like you :)

  • Like 1
Link to comment
Share on other sites

Hey

 

Thanks for the reply :)

 

Good to hear that it is not a problem with the Greensock plug-in. Is this a common bug with Chrome? When I tried searching for my problem yesterday I did not read anything about it. Maybe I was just looking on the wrong places ;)

 

Anyway, thanks for the fix! I'm going to apply it right away.

 

Haha, thanks, quickly identifying the problem is what helps me the most. I just wanted to be as clear as possible to avoid confusion :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...