2

请在 Firefox 和 Chrome 中查看：

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

如果单击文本，文本应该会通过一个简单的 slideToggle() 动画消失。如果您在 FF 中执行此操作，效果很好，但在 Chrome 中，它会在背景图像中创建工件。我希望你们中的某个人能描述我做错了什么。

非常感谢，

安内

编辑：我也在 Safari 中以相同的行为尝试过这个。

4

2 回答 2

2

我认为这与您使用 jquery 设置 css 而不是使用样式标签以老式方式进行设置的事实有关。我能够得到一个非常干净的动画：

    <!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>

我还从 div 中获取了 id 并将文本放入带有该 id 的自己的“p”标签中，仅仅是因为您需要隐藏文本，而不是 div 本身。我还使用了来自 google apis 的更新的 jquery 库。希望这可以帮助。​</p>

这是我的示例http://jsfiddle.net/AwGfs/29/

于 2012-09-07T12:52:54.593 回答
2

问题似乎与background-position. 当我将其更改为绝对值时，它会起作用。另外，如果我将它添加到@jcalabris 的代码中，问题就会出现：http: //jsfiddle.net/AwGfs/30/

我建议绝对将背景定位为一种解决方法。

您还应该在Chrome或WebKit bugtracker 中报告它。

于 2012-09-07T13:02:15.193 回答