修复了 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 的嵌入视图中，"result" iframe 位于 div 和 padding-top 中。但是iframe的高度是在没有padding的情况下计算出来的，所以在frame中scroll成为可能。您的 fixed background 停留在它自己的 window 的 bottom，但是这个 window 滚动，所以在某些时候它会低于浏览器的底部。您可以通过打开 link:

来测试它

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

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

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

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

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

编辑：

查看您的实时站点，很明显还有另一个问题，它看起来像是一个错误。似乎发生的是 Safari 将 viewport 视为 window 的 outerHeight 而不是 innerHeight。我猜这是因为 toolbar/header 中的透明效果。无论如何，您可以在控制台中清楚地看到运行ning 一些命令。这个根本不移动图像，这表明 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 并以这种方式动态定义背景位置。但是你也必须重新定义调整大小。

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

Fixed background images in Safari - Not aligning to bottom of viewport

css

background-image

background-position