web-tiki / responsive-grid-of-hexagons

CSS responsive grid of hexagons

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Hover states activate/conflict in IE over the full shape

1hqdigital opened this issue · comments

The issue occurs in IE when you hover over the entire #categories li shape, including the hidden end parts. This causes issues when hovering over one hexagon to the next.

I resolved this on another pen where the hexagon was made from rectangles by reducing the rectangle height. This pen looks better but the shape doesn't look as easy to tweak for this.

No issues in Chrome/FF.

Thx for reporting.
Can you specify what version of IE the issue appears in?

It's all versions that I tested (using BrowserStack and also using remote.ie). I originally assumed it was on old IE issue but it seems to be an IE issue not respecting the shape visibility.

It seems like IE lets the link overflow the parent li even with the overflow:hidden; property. I'll have to look into it more seriously to find a workaround.

Please let me know if you do. Thanks

I won't have enough time before next week but I'll let you know.

No rush :)

I have taken a closer look at the issue. It appears that it is an IE bug. It is dicussed here: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/5112505/

One workaround would be to make the a element smaller so it doesn't overflow but the hitbox would also be smaller. This would affect all browsers so I prefer not to do it. I hope it will be fixed soon in edge at least.

No problem, thanks for investigating.