1

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 px 或者为什么背面 vis 会影响它，但这给了我们一些可以对齐的东西。不幸的是，添加这个额外的翻译会导致过度闪烁，因此我们仍在努力寻找更好的解决方案。

4

1 回答 1

1

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

于 2012-08-31T15:48:08.720 回答