search

web-tiki / responsive-grid-of-hexagons

CSS responsive grid of hexagons
Apache License 2.0
572 stars 262 forks source link

Blurry Images #8

Closed tnschmidt closed 8 years ago

tnschmidt commented 8 years ago

The images are slightly blurry. Really shows up if images have small text in them. Is this a necessary evil of using CSS3 tranforms with scew/rotate?

syntacticsugar commented 8 years ago

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.

web-tiki commented 8 years ago

@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.

syntacticsugar commented 8 years ago

@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.

tnschmidt commented 8 years ago

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.

web-tiki commented 8 years ago

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

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.

web-tiki commented 8 years ago

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