Background-attachment fixed doesn't work in chrome when inside a scrolling div

Question

Basically, when a background image is inside a scrolling div it'll not longer act fixed and just revert back to scroll:

CSS:

<div class="wrapper">
  <span></span>
</div>

HTML:

html, body{
  width: 100%;
  height: 100%;
  margin: 0;
}

.wrapper{
  width: 90%;
  height: 1000px;
  margin: 0 auto;
  overflow: scroll;
}

span{
  background-image: url(http://i.imgur.com/Q3NruNr.jpg);
  height: 1500px;
  width: 100%;
  display: block;
  margin: 0 auto;
  background-attachment: fixed;
  background-size: cover;
}

It works fine in firefox but chrome seems to not handle it. Any work around?

http://codepen.io/mattcoady/pen/BooyaZ

Answer 1

This is a known bug in Chrome that happens a lot but i feel like every fix is different:(

here is a Codepen http://codepen.io/anon/pen/VvvYJz

All ive added is

-webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    transform: translateY(0%);

to your span tag, let me know if this is the desired effect.

Chromium issue https://code.google.com/p/chromium/issues/detail?id=20574