css - 在滚动 div 中时，背景附件固定在 chrome 中不起作用

Question

基本上，当背景图像位于滚动的 div 中时，它不再固定，而是恢复为滚动:

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;
}

它在 firefox 中运行良好，但 chrome 似乎无法处理它。有解决办法吗？

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

Answer 1

这是 Chrome 中经常发生的已知错误，但我觉得每次修复都不同:(

这是一个Codepen http://codepen.io/anon/pen/VvvYJz

我添加的是

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

到您的 span 标签，让我知道这是否是您想要的效果。

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