CODEWITHSUNDEEP
cssmicrosoft-edge
Tom Usborne
Tom Usborne

Reputation: 429

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.

Upvotes: 1

Views: 1265

Answers (1)

user3277192
user3277192

Reputation:

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.

Upvotes: 1

Related Questions