Html 最大高度和溢出不在ie9上滚动

我在ie9上遇到了一个非常奇怪的问题，其中具有max height（用calc（）和vh设置）和overflow auto的div没有滚动

单击此图像（如果此处未加载GIF），可以看到正在发生的情况：

我的HTML：

<div class="modal">
  <div class="modal__title">Modal Title</div>
  <div class="modal__body">
    <p>When I am too tall, I should scroll on ie9, but I don't.</p>
  </div>
  <div class="modal__footer">Footer here</div>
</div> 

我不明白为什么会发生这种情况，因为ie9支持vh、calc（）和max height。有什么想法吗

---

JSFIDLE Demo:

当组合

位置：固定的
和
转换：转换的
时，这似乎是一个重新绘制的问题

以下是两种可能的修复方法：


将溢出属性设置为滚动。即，
overflow-y：滚动
-ms过滤器：“progid:DXImageTransform.Microsoft.Matrix（M11=1，M12=0，M21=0，M22=1，SizingMethod='auto expand'）”


Src:

如果两者都不起作用，您可以放下变换：translate，并使用例如
display:table
将其居中。
输入错误
max heigh:
至
max heigh:
。也许是问题？你会拉小提琴吗？@sebastianbrosch-对不起，没有，那只是我在这里输入的：P@Corn亲爱的，这就是我们恨你的原因真诚地说，每一个开发者。这看起来像是渲染问题。您是否在其他操作系统（Windows 10、8、7）上尝试过此功能？这是在本机上运行还是在虚拟机上运行？
overflow-y:scroll
不是一个选项，因为我只想在实际需要时查看滚动条。但是，该过滤器工作正常。谢谢：）
.modal {
  min-width: 500px;
  max-width: 800px;
  border-radius: 4px;
  max-height: 65vh;
  overflow: hidden;
  background-color: white;
  position: fixed;
  top: 15vh;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

.modal__body {
    max-height: calc(65vh - 120px)); // 120 is the combined height of the header and footer
    overflow-y: auto;
}