Using CSS3 animation breaks the fixed background positioning of all elements on the page

Question

I just worked on a web page with background positioning elements fixed, and it worked fine until I applied css animation to a (completely different and irrelevant) element.

I tried removing / reapplying animations to make sure that this was really a problem, and of course, when I add animation, the positioning of the background (from each element on the page) is static, and works again the moment I delete the animation.

Is this normal?

---

Ultimately, I am looking for a solution that allows:

• relative ,
• floating elements (or the smallest children of similar shells)
• for use with fixed background position
• on a webpage that uses CSS3 animations,
• compatible with Chrome.

---

Here with the animation:

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

And here without them:

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

I tested this only in Chrome.

---

UPDATE . As one answer shows, giving fixed positioning elements positioning elements staticcauses the elements to retain fixed background behavior when CSS3 animations are active on the page due to the necessary relative positioning of the element.

It can be assumed that this could be solved by wrapping the elements involved in the relative parent element, but this is not so.

, grand-child , CSS3 ( ) .

---

:

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

, :

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

CSS3:

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

-, , float:left :

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

!

---

Answer 1

CSS3 Chrome.

, , - , :

• ,
• ,
• -, CSS3,
• Chrome.

:

• fixed-background float.

---

Chrome:

• fixed background-position relative-wrapper.

• relative-wrapper position: relative. ( , , , . float.

• , , fixed background-position float: left ( ). . , -.

---

Google CSS, , . , , , CSS3, , .

---

, , fixed background-position

float.

, , , fixed . , float, .

---

, , .

JSFiddle, .

---

CSS3 Transition:

JSFiddle, , fix-background position , CSS3 strong > -.

Answer 2

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