Chrome css过渡：带过滤器的文字消失

Question

在转换运行时，Chrome会使用过滤器隐藏文本。我有以下代码：

.c1 {
  width: 350px;
  height: 40px;
  overflow: hidden;
}

.c1 h1 {
  transition: transform ease 0.5s;
  margin: 0;
}

.c1 h1:hover {
  transform: translateY(-40px);
}

.c2 {
  filter: drop-shadow(0 0 1px #000);
}

<div class="c1">
  <h1>a long long title header, very long</h1>
</div>

<div class="c2">
  some text
</div>

Codepen： https://codepen.io/anon/pen/xzXMQp

当您将鼠标悬停在h1上时，“某些文字”会消失。转换结束后，文本再次可见。它仅在Chrome（67）中重现，在Firefox中是可以的（没有尝试过任何其他的）。造成这种情况的原因以及如何解决这个问题？