修复了 Safari 中的背景图像 - 未与视口底部对齐

Question

我注意到在 Safari 中，固定的封面背景不合理。使用 background-position: left bottom; ，背景图片应该对齐到它的容器的左下角，例如，给定徽标的图片应该始终存在，因为它位于所述角落。

参见下面的示例，在 Firefox 中，图像左下方的徽标会出现，而在 Safari（8.0.3 版）中则不会。

background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: left bottom;

http://jsfiddle.net/louiswalch/b6hszasz/1/

行为：Firefox 左/Safari 右

Answer 1

从您的屏幕截图来看，问题似乎是iframe 滚动问题。我不仅可以在Safari 上重现您的问题，还可以在Firefox 和Chrome 上重现您的问题。

在jsfiddle 的嵌入视图中，“结果”iframe 位于带有padding-top 的div 中。但是iframe 的高度是在没有padding 的情况下计算的，因此可以在框架中使用scroll。你的fixed background 保持在它自己的bottom 的window 上，但是这个窗口会滚动，所以在某些时候它会低于浏览器的底部。您可以通过打开链接进行测试：

http://jsfiddle.net/louiswalch/b6hszasz/1/embedded/result/

然后打开控制台运行这一行：

document.getElementById('result').style.padding = '0px'

您应该会看到您的 background 行为正常。由于jsfiddle 中的 iframe 已被沙盒化，因此不确定您的iframe 是否有办法纠正此问题。

请注意，这是基于您的屏幕截图、您的小提琴和我的浏览器上的行为，可能还有另一个问题。但就我而言，我可以很容易地重现这个问题。

编辑：

查看您的实时网站，很明显还有另一个问题，看起来像是一个错误。似乎发生的事情是 Safari 将viewport 视为窗口的outerHeight 而不是innerHeight。我猜这是因为工具栏/标题中的透明效果。在任何情况下，您都可以在控制台中清楚地看到这一点。这个完全没有动图，说明100% position y是根据outerHeight而不是innerHeight制作的：

$('.image').css("background-position", "left -" + ($('.image').width() - window.outerHeight) + "px")

但是当使用这个时它会正确移动：

$('.image').css("background-position", "left -" + ($('.image').width() - window.innerHeight) + "px")

所以我想一种解决方案是检测 Safari 并以这种方式动态定义背景位置。但是你也必须重新定义调整大小。