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.

Answers


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/


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.


Need Your Help

Try Internet Connectivity only for few Seconds

java android multithreading concurrency

I am trying to connect to internet where I have to fetch data, if the time exceeds more than 5 secs to connect I have to finish the process &amp; continue to work offline.

Set breakpoint in C or C++ code programmatically for gdb on Linux

c++ c linux gdb

How can I set a breakpoint in C or C++ code programatically that will work for gdb on Linux?

TFS 2005 Wiki Template?

sharepoint visual-studio-2005 tfs wiki

Is there a Wiki plugin for TFS 2005, ie. SharePoint Services 2.0?