1

I have a hexagon menu on this site which is correctly working in chrome but it has rendering issues in FF and IE.

http://wrausch.de.w013b68e.kasserver.com/

When you hover the hexagon menu in FF/IE you can see 2 blue lines which are not fully covered by the hovereffect.

Since I just got the site from a colleague who left I don't know where to begin.

Any help would be appreciated. Thanks

drbeat
  • 13
  • 5
  • Maybe this can help: [Responsive gird of hexagons](http://stackoverflow.com/a/26116497/1811992) and the github repositery for the grid [here](https://github.com/web-tiki/responsive-grid-of-hexagons). – web-tiki Sep 09 '16 at 07:45
  • Those aren't lines, because of `css transform jagged edges` it's showing background. – Abhishek Pandey Sep 09 '16 at 08:14

1 Answers1

1

Transformed elements - like the skewed elements you used to create the hexagons - end up in positions that are measured in fractions of a pixel, and so the browser has to make a judgment about how to display elements on a screen where mathematically perfect shapes need to be represented in a grid of blocky pixels.

Two transparent elements are next to each other and are slightly overlapping due to this rounding. Since the elements are slightly transparent, any overlapping would show up as a dark line.

Mathmatically, the elements are not touching, but due to the expression and simplifications of the browser, they are now slightly overlapping.

On Firefox the lines appear only when the transition is complete. This occurs because the rendering engine behaves differently during an animation than when it is complete.

To fix this I would try using fully opaque background colors when the user hovers. That way even dramatic overlapping would not cause a change in color.

Alexander Flenniken
  • 432
  • 4
  • 17