使用 CSS3 动画会破坏页面中所有元素的固定背景定位

Posted 2023-03-06

【中文标题】使用 CSS3 动画会破坏页面中所有元素的固定背景定位

【英文标题】：Using CSS3 animations breaks fixed background positioning of all elements in page

【发布时间】：2014-05-17 12:36:48

【问题描述】：

我刚刚制作了一个网页，其中包含具有 fixed 背景定位的元素，并且在我将 css 动画 应用于（完全不同且不相关的）元素之前，它的效果很好。

我尝试删除/重新应用动画以确保确实是问题所在，果然，当我添加动画时，背景定位（页面上的 每个 元素）变为静态，并在我删除动画的那一刻再次工作。

这正常吗？

---

最终，我正在寻找一种解决方案，它允许：

相对

定位，

浮动

元素（或至少类似包装器的子元素） 用于

固定

背景位置 在使用 CSS3 动画的网页中， 与 Chrome 兼容。

---

下面是动画：

http://jsfiddle.net/Wr7X4/5/

这里没有它们：

http://jsfiddle.net/Wr7X4/4/

我只在 Chrome 中测试过。

---

更新：如一个答案所示，为元素提供固定背景位置 static 定位会导致元素在 CSS3 动画时保留其固定背景的行为以牺牲所需的相对元素定位为代价在页面上处于活动状态。

人们会认为这可以通过将相关元素包装在相对父元素中来解决，但事实并非如此。

如果 CSS3 动画（或过渡）在页面上活动 任何地方，那么即使是相对定位元素的孙子元素也会失去其固定的背景定位.

---

这是与 静态定位：

http://jsfiddle.net/Wr7X4/6/

这是静态定位带有相对包装器，浮动：

http://jsfiddle.net/Wr7X4/7/

这是上面的没有激活 CSS3 动画：

http://jsfiddle.net/Wr7X4/8/

如果我从包装器中删除 float:left，我刚刚发现了一些东西：

http://jsfiddle.net/Wr7X4/9/

这让它工作得很好！

---

【问题讨论】：

您可以将您的代码添加到您的帖子中并提供一个 JSFiddle 吗？

这是一个非常大的网页。我将构建一个测试场景的小提琴

你可以有礼貌地支持firefox ...

啊火狐？我正在使用 chrome 进行开发。对于那个很抱歉！ @aloisdg

@AndyM 为了加快初始结果的速度，我支持 chrome，然后在项目完成后，我通过 Nettuts 的 Prefixr add 运行 css，这使得一切都非常跨浏览器。跨度>

【参考方案1】：

CSS3 动画打破了 Chrome 中固定的背景定位。

我得到的最接近我的要求答案的是一种解决方法，它允许：

相对

定位，

固定

背景元素， 在使用

CSS3 动画

的网页中， 与 Chrome 兼容。

但不对于：

fixed-background 元素

最终

被赋予 float 定位的

行为

。

---

解决方法这个 Chrome 错误：

使用类relative-wrapper 围绕fixed background-position 元素放置一个包装器。

为相对包装类指定样式position: relative。 （以及您需要提供的任何其他样式，例如宽度或高度。只是没有 float。

最后，讽刺地，将fixed background-position 的元素设置为float: left 样式（或任何浮点数）。注意：浮动定位将使您的元素行为和大小不同。

---

如果您还不知道它是如何导致元素行为的，那么您应该使用 Google CSS 浮动定位。但是，由于这个问题的目的是弄清楚如何在具有 CSS3 动画的页面中的固定背景元素上进行相对定位和浮动定位，我将假设您可以处理。 p>

---

注意早先，我说过fixed background-position元素不能

最终 获得float定位的行为。

这是因为无论您做什么，都必须将浮动元素包装在具有非浮动定位的包装器中，否则fixed 背景位置将保持损坏。碰巧元素 inside 需要为相对包装器指定 float 定位以保持其固定的背景定位。

---

我不知道为什么会这样，但它确实。

这是JSFiddle, see for yourself.

---

CSS3 过渡 活动：固定背景定位效果相同

我没有时间添加 JSFiddle 示例，但值得注意的是，当 CSS3 过渡 活动 时，此解决方法还解决了元素中 fix-background position 的损坏问题strong> 在网页中。

【讨论】：

这对我不起作用，但添加 z-idex: -1 确实有效。这真是一个烦人的错误。

【参考方案2】：

试试这个

.outside-board
    //try to change position to
    position:static;

【讨论】：

这确实修复了我的两个固定位置的背景，并使另一个静止，奇怪的是，你能解释一下为什么/如何工作吗？

这确实会导致其他问题，例如我不能在元素上使用 z-index。当然，如果需要，我可以使用包装器来解决这个问题。

编辑：我也不能使用包装器！似乎如果元素是任何相对定位元素的孙子元素，即使有自己的静态定位，它也不会保留固定的背景位置行为。为什么不相关元素上的 CSS3 动画会有这样的效果？