Using CSS3 animations breaks fixed background positioning of all elements in page

Question

I was just working on a web page featuring elements with fixed background positioning, and it worked great until I applied css animations to a (completely different & irrelevant) element.

I tried removing / re-applying the animations to make sure it was actually the issue, and sure enough, when I add animation, the background positioning (of every element on the page) goes static, and works again the moment I remove the anims.

Is this normal?

---

Ultimately, I'm looking for a solution that allows for:

• relatively positioned,
• floating elements (or a least children of similar wrappers)
• to be used with fixed background position
• in a web page where CSS3 animations are used,
• compatible with Chrome.

---

Here's with the animations:

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

And here's without them:

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

I've only tested this in Chrome.

---

UPDATE: As shown by one answer, giving the elements with fixed background positions static positioning causes the elements to retain the behavior of their fixed background when CSS3 animations are active on a page at the expense of the needed relative element positioning.

One would assume that this could be solved by wrapping the involved elements in a relative parent element, but this is not the case.

It would appear that even a grand-child of a relatively positioned element will lose its fixed background positioning if CSS3 animations (or transitions) are active anywhere on the page.

---

Here's with the static positioning:

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

Here's the static positioning with a relative wrapper, floating:

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

Here's the above without CSS3 animations active:

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

And something that I just discovered, if I remove float:left from the wrapper:

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

Which makes it work just fine!

---

Answer 1

CSS3 Animations breaking fixed background positioning in Chrome.

The closest that I have gotten to my requested answer is a workaround that allows for:

• relatively positioned,
• fixed background elements,
• in a web page where CSS3 animations are used,
• compatible with Chrome.

But NOT for:

• fixed-background elements to ultimately be given the behavior of float positioning.

---

To work-around this Chrome bug:

1. Place a wrapper around fixed background-position elements with the class relative-wrapper.

2. Give the relative-wrapper class the style position: relative. (And any other styles you need to give it, such as width or height. Just no float.

3. And finally, ironically, give the elements with fixed background-position the style float: left (or any float). Note: Float positioning will make your elements act and size differently.

---

You should Google CSS float positioning if you don't already know how it causes elements to behave. However, since the purpose of this question was to figure out how to make relative and float positioning work on fixed-background elements in a page with CSS3 animations, I'm going to assume that you can handle that.

---

Notice earlier, I said that the fixed background-position elements could not

ultimately be given the behavior of float positioning.

This is because no matter what you do, you'll have to wrap the floated elements in a wrapper with non-float positioning or the fixed background position stays broken. It just so happens that the element inside the relative wrapper needs to be given float positioning to keep its fixed background positioning.

---

I don't know why this works, but it does.

Here's the JSFiddle, see for yourself.

---

CSS3 Transition activity: same effect on fixed background positioning

I don't have the time to add JSFiddle examples, but it's worth noting that this work-around also solves breakage of fix-background position in elements when CSS3 Transitions are active in the web page.

Answer 2

Try this

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