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

Question

我在Safari中注意到，固定封面背景不合理。使用git rebase -i origin/<remote-branch> <local-branch> 时，背景图像应该在其容器的左下角对齐，因此，例如，给定徽标的图像应始终存在，因为它位于所述角落。

请参阅下面的示例，在Firefox中，图像左下方的徽标出现，而在Safari（版本8.0.3）上则没有。

background-position: left bottom;

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

行为：Firefox Left / Safari Right

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并以这种方式动态定义背景位置。但是你也必须重新定义调整大小。