I'm using the latest Font Awesome to place SVG images as icons in my navigation bar. They are supposed to remain hidden until you hover on the navigation item, at which point the text slides over and the SVG fades in.
This works fine in Chrome.
In both Internet Explorer 11 (on Windows 7) and Edge (on Windows 10) I am getting this weird effect where the SVG appears at the top of the viewport and waits there until the text sliding animation finishes, at which point it plops into place next to the text.
I've tried all sorts of troubleshooting, but I just can't lay a finger on what this is doing, and why. How can I work around this rendering issue?
Remove position: relative from the class .link-container.
It's not needed tested it with IE 11 with the dev toolbar.
Then it works fine position: relative is messing up the position.