CODEWITHSUNDEEP
jquery
enne87
enne87

Reputation: 2309

jQuery- animation not working properly in Google Chrome

Please have a look at this both in Firefox and in Chrome:

http://jsfiddle.net/enne87/AwGfs/1/

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,

enne

EDIT: I also tried this in Safari with the same behaviour.

Upvotes: 2

Views: 680

Answers (2)

Thomas
Thomas

Reputation: 8859

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.

You should also report it in the Chrome or WebKit bugtracker.

Upvotes: 2

ORION
ORION

Reputation: 2411

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: 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>AG-App!</title>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js">    </script>
    <script type="text/javascript" src="js/main.js"></script>
    <script type="text/javascript">
    </script>
    <style type="text/css">
      body { background: #ffffff url('http://advancedata.ad.funpic.de/bg.png') no-repeat left top; background-attachment: scroll; background-size: 100%;}        
    </style>  
</head>
<body>

    <div>
      <p id="test">Click here to see that<br />in chrome this is going to <br /> create artifacts.</p>
    </div>

</body>
</html>

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/

Upvotes: 2

Related Questions