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

Parallel.Invoke(), TransactionScope() and SqlBulkCopy

c# multithreading task-parallel-library transactionscope sqlbulkcopy

I have multiple methods inside a Parallel.Invoke() that need to run inside of a transaction. These methods all invoke instances of SqlBulkCopy The use-case is "all-or-none", so if one method fails

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.