Edge browser menu item hover glitch

Been battling with this for a few days - finally caving in and asking for help.

I'm experiencing a super weird issue in the Edge browser.

Here's the test site: http://edge22.com/test-edge/

When you hover over the menu items, a 1px line appears below the menu item you hovered. There's no border, text-decoration etc.. If the white header area is made black, the line is black etc..

It's like the height of the menu item is reducing by 1px only on hover: http://screencast.com/t/Lpkow3HF0

Now the weird part. This only happens when the element right before the navigation is a link (the "Test" link). If this link is removed, the glitch disappears.

Now if I wrap the link in a div and give it a small margin, the issue goes away:

<div style="margin-bottom:0.1em;"><a href="#">Link</a></div>


Does anyone have any idea what's going on? I've stripped all of the CSS down to nothing, and can't pinpoint the problem.

1 Answer
1

I'm not sure if it could fix your problem (as it's not available anymore), but it fixed mine... So for others looking for Edge artefacts that occur on hover ...

I had a somewhat similar issue where a line would appear totally without reason on some elements (and not on other elements using the same style on the same page).
In my case it damaged a menu bar under a fractionally sized image with great repeatability upon hover (and even when not hovering anymore the damage remained).
Simplest solution I found: add a border to the parent in the same color as the background that was damaged ; problem solved.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.