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 像素或为什么背面会影响它,但这给了我们一些一致的东西。不幸的是,添加这种额外的转换会导致过度闪烁,因此我们仍在努力寻找更好的解决方案。
最佳答案
如果删除 background-attachment: fixed,它们的行为似乎相同。我认为不需要,因为您已经在应用背景大小来包含。
关于html - Webkit 与 Firefox 背景位置和背景附件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12218606/