为什么 IE11 和 Edge 无法正确渲染带有 Font Awesome 图标的动画?

Why is IE11 and Edge incorrectly rendering animation with Font Awesome icons?

我正在使用最新的 Font Awesome 将 SVG 图像作为图标放置在我的导航栏中。它们应该保持隐藏状态,直到您将鼠标悬停在导航项上,此时文本滑过并且 SVG 淡入。

这在 Chrome 中工作正常。

在 Internet Explorer 11(在 Windows 7)和 Edge(在 Windows 10)中,我得到了这种奇怪的效果,SVG 出现在视口的顶部并在那里等待直到文本滑动动画结束,此时它会扑通一声停在文本旁边。

我已经尝试了各种故障排除,但我无法弄清楚这是在做什么以及为什么。我该如何解决这个渲染问题?

My site

从 class .link-container 中删除 position: relative
不需要使用带有开发工具栏的 IE 11 对其进行测试。
然后它工作正常 position: relative 弄乱了位置。