Firefox忽略表格单元格

Question

由于某些原因，firefox（和单独的firefox，这甚至不是一个问题，即......奇怪）似乎忽略了表/表单元格元素的top:xx%值，但最初只是，如果在控制台中编辑了值，但它会立即按预期工作。

.overlay nav {
    text-align: center;
    position: relative;
    display: table-cell;    
    vertical-align: middle;
    top: 50%; /* <---the issue */
    height: 100%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
}

我已经通过切换到top:xxvh解决了现在的问题，但是我很好奇为什么这个百分比不起作用所以我仍然在问这个问题，看看是否有人可以放弃一些关于这个问题。

Codepen showing example, only occurs in firefox