Webkit vs. Firefox 背景位置和背景附件答案

【问题标题】：Webkit vs. Firefox background-position and background-attachmentWebkit vs. Firefox 背景位置和背景附件
【发布时间】：2012-08-26 11:08:18
【问题描述】：

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 的 background-image-position: 0px 75px;居中

我不知道为什么它偏离了 75 像素，或者为什么背面 vis 会影响它，但这给了我们一些一致的东西。不幸的是，添加这个额外的翻译会导致过度闪烁，因此我们仍在努力寻找更好的解决方案。

【问题讨论】：

标签： html firefox css webkit

【解决方案1】：

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

【讨论】：

感谢布赖恩的快速回复。删除它实际上使图像居中，但我们正在寻找它像 Firefox 版本一样无缝过渡到背景。删除该属性会导致中间 div 内的背景变小，不会溢出到背景中。
啊好吧，我看到你现在的效果了。这绝对是奇怪的，它很可能是具有这些背景属性的 webkit 错误（特别是固定时的居中）。好的一面是，如果没有找到其他解决方案，您可以使用 JS 手动调整背景位置。