Blurry Images about responsive-grid-of-hexagons HOT 6 CLOSED

Yes, I noticed this too (text in the hexagons), and after doing some googling online, saw that CSS transformations are the culprit. There are various solutions to address this, but I don't know enough about debugging CSS transformations to pinpoint which of the suggestions will solve the blurriness, if any will at all.

seems like adding any of :
-webkit-font-smoothing: antialiased; or
translate3d( 0, 0, 0)
backface-visibility: hidden;
transform: perspective(1px) scale(1.1)

had fixed the issue for some blurs, but not all.

Perhaps @web-tiki has already thought things out and this is as close to clear already. @web-tiki any thoughts / suggestions? Your expert opinion is sought.

from responsive-grid-of-hexagons.

@tnschmidt the blurry images are caused by the 3d transform applied to them (transform:translatez(-1px);).
That transform was added because in some cases, there was a small jitter on the image at the beginning and end of hover transition (in chrome).
I retested without the transform and that jitter doesn't happen anymore so I removed the transform on the images.

@syntacticsugar The blurry text depends very much on the browser you use. In chrome, the blur is acceptable in FF there is a light snap on the text at the end of the hover transition and in edge, the result is close to perfect without blur all along the transition. I didn't test on safari as I don't have a mac but it should be close to chrome.
In any case, There is no way I have found to get a perfect result in all browsers.
All the CSS properties you suggested add hardware acceleration so they should have the same effect as transform:translatez(-1px); in this case.

from responsive-grid-of-hexagons.

@web-tiki Ah, I figured you had already thought all of these issues out in advance. Thank you very much for the followup.

My CSS knowledge is nowhere near as proficient as yours, as it appears like you wield CSS as fluidly I wield breaths of air, so I take what you say with a lot of respect.

from responsive-grid-of-hexagons.

Thanks, I appreciate the help guys. Not sure what version of the hexagons I was using, because this rule is not currently in your repository, but the blur disappeared when I took off the backface-visibility:hidden CSS rule on the anchor tag inside the hexagon. However, by doing this there is a slight jagged edge in Chrome now on the hexagon itself.

from responsive-grid-of-hexagons.

@tnschmidt The backface-visibility rule was removed on commit ddc4324

For the jagged edges, you will see that the demo doesn't have them. They are removed with the 3d transform (translatez(-1px)) on the .hex elements.

from responsive-grid-of-hexagons.

Since there is no update and that the issue has been discussed, I am closing it

from responsive-grid-of-hexagons.