2

I have a hexagon grid, and I've used -webkit-backface-visibility:hidden to smooth out the edges in Chrome. But, this makes the text inside it blurry.

See demo

So I tried moving the text out of the backface element and instead absolutely positioned it on top. This fixed the blurriness, but created a new problem. Each hex shape is a link. Once I moved the link out of the child element, the links overlap the preceding hex shape in the interlocking grid.

See demo 2

See how when you scroll over the right side of the first hex, you get the link for Hex 2 because it overlaps it.

Is there a way to have smooth hex edges AND clear text AND not overlap the links?

LBF
  • 1,133
  • 2
  • 14
  • 39
  • This might help : [Responsive grid of hexagons](http://stackoverflow.com/a/26116497/1811992) the technique used to make the hexagon grid is different and the text seems less blurry than in your examples. – web-tiki Oct 09 '15 at 17:15
  • Thanks. I checked out the example, but I still see a noticeable difference in clarity when I add/remove backface hidden from their hex as well. – LBF Oct 09 '15 at 17:37
  • I am not aware of a pixel perfect solution to this but I found a workaround to make it less blurry and described it [here](http://stackoverflow.com/a/26252137/1811992) – web-tiki Oct 09 '15 at 17:44
  • I am actually seeing the correct link on each part of the hexagons, I am using chrome 45 – Saar Oct 09 '15 at 19:14
  • That's strange, @Saar. I'm using Chrome 45 too. Roll over the right side of the first hex... does it highlight the second hex when you get close to the right side? – LBF Oct 09 '15 at 19:33
  • @Lindsay yup, now the issue is reproduced. before it didn't happen though 100% – Saar Oct 09 '15 at 19:41

0 Answers0