html - Webkit 与 Firefox 背景位置和背景附件

Question

Webkit 呈现背景位置的方式与 Firefox 的呈现方式存在一些问题。我正在制作一个自定义动画，它基本上是一个大背景图像，带有一个选择主图像 + 背景图像的 3D 旋转木马。然后，动画使旋转木马四处滑动并拉动背景(参见下面的 URL)。

问题是该页面在 Firefox 中呈现我想要的方式，但在 Chrome/Safari 中却没有。他们在此特定布局中以不同方式处理背景位置/背景附件。我不确定 Chrome 以什么为中心，但它似乎位于右下象限。

这是我们要实现的目标的精简示例，因此它更有意义。在 FF 中效果很好，但在 webkit 中，内部窗口背景的居中位置偏离了: http://ps12.pointsourcellc.com/webkitTest/test/test.html

我们使用带有中心/顶部定位的固定背景，并包含真实背景和中心 div 内部的填充，即:

#aboutView .cardFront {
background-image: url('../images/bay_bridge5570.jpg'); 
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center top;
background-size: contain;
}

在此先感谢您的任何建议。我对导致此问题的原因感到非常困惑，并且没有找到任何运气。

---

更新:同事和我发现了一些“修复”，但我们仍然对此不满意，并且不确定为什么图像定位首先关闭:

• 删除 .selectedView -webkit-transform: translate(0px, 0px); CSS 的一部分
• 删除 -webkit-backface-visibility: hidden; CSS 的一部分(这使得使用翻转动画更加困难，但没有它我们就无法使其居中...)
• 添加特定于 webkit 的背景图像位置:0px 75px；居中

我不确定为什么它会偏移 75 像素或为什么背面会影响它，但这给了我们一些一致的东西。不幸的是，添加这种额外的转换会导致过度闪烁，因此我们仍在努力寻找更好的解决方案。

Answer 1

如果删除 background-attachment: fixed，它们的行为似乎相同。我认为不需要，因为您已经在应用背景大小来包含。