小编Nik*_*erg的帖子

我有一个动画,点击链接时会触发.这是一个jQuery动画,扩大div然后淡出.为了确保速度,在单击链接的同一时间,重定向将被触发.这必须发生,我不能将重定向放在jQuery的animate()的成功函数中.此重定向通过表单提交完成.在Chrome,Firefox和IE上它按预期工作,动画播放,如果页面在动画结束前完全加载,它会重定向,但动画确实会播放.

在Safari(主要在iPad上测试)上,一旦点击链接,页面就会看似"冻结",动画无法执行.在页面加载时屏幕上还有GIF,如果我在屏幕上显示这些GIF并动画时单击链接,它们也会暂停.我看过一篇帖子说要设置超时,应用样式,然后提交,但问题是虽然HTML会应用那种CSS样式,但它仍然会冻结屏幕,而且它们不处理动画,只是静态CSS样式.

下面是一些示例代码,用于显示我如何完成此操作的方法(它仅仅是为了说明我的观点而未经过测试,因此可能缺少部分或语法错误):

var someData = 'foo'; //This value is irrelevant, just there for syntactical consistency.
$("#link").on("click", function() {
    var form = $("<form method='POST'></form>");
    form.attr("action", "http://someurl.com");
    var input = $("<input type='hidden'/>");
    input.val(someData);
    form.append(input);
    $(document.body).append(form);
    form.submit();
  
    //Form has been submitted, now run a short animation for the remaining life of the current page
    $(this).animate({width: "100px", height: "100px", opacity: "0"}, 150);
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="link" style="width: 100px; height: 100px; background-color: #FFF">Click Me</div>

基本上,我需要确保一旦Safari浏览器开始加载新的页面/链接,它就不会停止更新当前页面.从我所看到的情况来看,这听起来像Safari中的问题,但是我已经看到这个问题在网络上也没有遇到过.有些帖子处理GIF动画,但这是一个CSS风格的动画.

谢谢你的帮助!

在第一个:在Safari 8中悬停复选框和选中的单选按钮将闪烁,就好像它被点击一样.示例代码:

<div>
    <label><input type="checkbox" checked> Hover me in Safari 8</label>
</div>

<style>
div {
    background-color: #eee;
    padding: 1em;
}
label {
    line-height: 2em;
    display: block;
}
label:hover {
    background-color: #fff;
}
</style>

我还在这里创建了一个JSFiddle,但请记住,这只发生在第一个悬停事件而不是后续事件.您需要重新运行代码才能再次触发它.

有谁知道这种行为源于何处以及如何预防？Chrome和Firefox都没有出现这种闪烁现象.

更新

我通过bugreporter.apple.com向Apple报告了这个问题,他们关闭了我的问题(雷达21101864),状态为Duplicate of 17781269(Open).