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;
}

提前感谢您的任何建议。我对导致这个问题的原因感到非常难过，并且没有任何运气可以搜索它。

更新：Coworker和我发现了一些“修复”，但我们仍然不满意，并且不确定为什么图像定位一开始就关闭了：

删除.selectedView -webkit-transform：translate（0px，0px）; CSS的一部分
删除-webkit-backface-visibility：hidden; CSS的一部分（这使得使用翻转动画更加困难，但没有它我们就无法让它居中......）
添加特定于webkit的background-image-position：0px 75px;中心

我不确定为什么它会缩短75像素或为什么背面可能影响它，但这给了我们一些排队的东西。不幸的是，添加这种额外的翻译会导致过多的闪烁，因此我们仍在努力寻找更好的解决方案。

Answer 1

如果删除background-attachment：fixed，它们的行为似乎相同。我不认为这是必要的，因为你已经应用了背景大小来控制它。

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

1 个答案: