Question

我有一些在FF和Chrome中运行良好的JQuery，但我注意到它在Mac上的Safari 6.1中不起作用。基本上，它是一个设置为position:relative的容器，其中一个框内设置为position:fixed。当我尝试将其设置为动画时，容器移动但不移动固定元素。在进一步测试时，如果框被设置为relative，则会生成左侧动画，如果它是fixed，则会再次动画，而不是两者的组合。我需要将其设为fixed，因此将其设置为absolute无济于事。再次，这适用于FF和Chrome。

如果你有Safari检查这个小提琴，让我知道是否有人经历过这个：

修改

我忘了这实际上是使用.css而不是.animate而且它正在使用$(window).scroll(function()"。下面更新了小提琴：

JSFIDDLE

Answer 1

我想说这在FF和Chrome中比在Safari中更像是一个错误。固定位置相对于视口定位。如果您要将left / top值添加到.box，您会在FF和Chrome中看到相同的行为。

.box {
    height: 100px;
    width: 100px;
    background: black;
    position: fixed;
    left: 0;
    top: 0;
}

JSFiddle

Answer 2

我检查了Safari，令人惊讶的是，它无法使用固定值。所以，这是我的解决方案。为什么不添加.box和$ this。例如：

$(".container").click(function(){
$('.box', this).animate({"left": "-100px"});
});

这样，它适用于所有浏览器。我想说，快速破解野生动物园。

Safari Bug可能吗？相对div内的固定div不具有动画效果

2 个答案: