Strange background rendering on chrome while background-attachment:fixed;

Question

I wanted my background to be fixed, I did this a lot of times but this time when I scroll it gets distorted with no reason, I managed to make navigation bar not distorted not adding

  -webkit-transform: translateZ(0); 

to it but I don't how to fix the background. It only happens on Chrome, works fine with IE. http://imgur.com/pANZViI

Here's the demo: http://klaunfizia.pl/damian/

Here's the css:

background:url(images/background.jpg) #ff7400 no-repeat left top;
background-size: 100%;
background-attachment:fixed;
margin: 0 0 0 0;

Answer 1

To start...clean up this CSS and use:

body {
   background: url(images/background.jpg) #ff7400 no-repeat left top;
   background-size: cover;
   background-attachment: fixed;
   margin: 0;
}

Then change the z-index to this. It shouldn't be negative -1. That was your problem:

#animacja {
   position: fixed;
   top: 200px;
   right: -70px;
   z-index: 1;
}

And fix/add z-index on your menu bar so it's above that graphic:

#mainMenu {
   position: relative;
   height: 80px;
   width: 100%;
   background-color: red;
   position: fixed;
   -webkit-transform: translateZ(0);
   z-index: 10;
}