jQuery- animation not working properly in Google Chrome
Please have a look at this both in Firefox and in Chrome:
If you click on the text, the text should disappear with a simple slideToggle() animation. If you do this in FF it works great but in Chrome it creats artifacts in the background-image. I hope someone of you can descripe me what I'm doing wrong.
Thanks very much,
EDIT: I also tried this in Safari with the same behaviour.
I think it has something to do with the fact that you're setting up your css with jquery as opposed to doing it the old fashioned way with a style tag. I was able to get a pretty clean animation with:
I also took the id from the div and put the text into its own 'p' tag with that id, simply because you need to hide the text, not the div itself. I also used an updated jquery library from google apis. Hope this helps.
Here is my example http://jsfiddle.net/AwGfs/29/
The problem seems to be with background-position. When I change it to something absolute it works. Also if I add it to @jcalabris' code the problem shows up: http://jsfiddle.net/AwGfs/30/
I'd suggest absolutely positioning the background as a workaround.