视频背景中断哈希链接

Question

我有基本video背景。当我点击链接时，指向带有视频背景的块内元素的id会发生奇怪的事情：目标块就像块内的“滚动”一样。

预期行为：浏览器将用户滚动到目标元素，而不会破坏填充。

这是一个简化版本（点击链接）。在Mac OSX上经过Chrome 43.0.2357.130（64位）测试。

.tile-block {
  background: rgba(0, 0, 0, .4);
  position: relative;
  overflow: hidden;
}
.tile-block__wrap {
  box-sizing: content-box;
  padding: 6%;
}
#target-block {
  background: green;
  width: 100px;
  height: 100px;
}
.video-background {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  z-index: -1;
}

<div class="tile-block">
  <div class="tile-block__wrap">
    <div id="target-block">Something here</div>
  </div>

  <video class="video-background">
    <source src="http://www.w3schools.com/html/mov_bbb.mp4">
  </video>
</div>

<a href="#target-block">Click here</a>

它出了什么问题？应用于普通div的相同样式按预期工作。

.tile-block {
  background: rgba(0, 0, 0, .4);
  position: relative;
  overflow: hidden;
}
.tile-block__wrap {
  box-sizing: content-box;
  padding: 6%;
}
#target-block {
  background: green;
  width: 100px;
  height: 100px;
}
.video-background {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  z-index: -1;
}

<div class="tile-block">
  <div class="tile-block__wrap">
    <div id="target-block">Something here</div>
  </div>

  <div class="video-background">
  </div>
</div>

<a href="#target-block">Click here</a>