<http://jsfiddle.net/MR94s/>

```
.wrap {
    position: absolute;
    z-index: 777;
    top: 100%;
    left: 0;
    width: 100%;
    min-height: 100%;
    background-color: white;
    -webkit-overflow-scrolling: touch;
    -moz-transform: translateX(25%);
    -webkit-transform: translateX(25%);
    -o-transform: translateX(25%);
    -ms-transform: translateX(25%);
    transform: translateX(25%);
}

section {
    position: relative;
    width: 100%;
    display: table;
    height: 450px;
    border-bottom: 2px solid #E6EAED;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 20px;
    background-color: #333;
    background-repeat: repeat;
    background-position: center center;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
    background-image: url('http://placekitten.com/600/600');
}

```

See the above fiddle. I'm using a similar structure in a project I'm working on. It's a page with alternating sections, one for content and one acting as a divider with a covering and fixed background image.

Works fine, but for some reason when applying a translate to the element with the fixed background or it's parent, the background completely vanishes or leaves some artifacts and parts of the image.

Works fine in any other browser. Haven't had any luck looking for a solution so I'm hoping someone can help me with this.

Thanks in advance!