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

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.

Try this

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