Comments (6)
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.
Related Issues (20)
- border HOT 4
- Grid not displaying on Chrome Mac 56.0.2924.87 (64-bit) HOT 2
- How to make hexagons flat-topped HOT 1
- Hexagon area question or so...? HOT 3
- Less hexagons on odd rows HOT 2
- Hover effect broken HOT 2
- [Question] Using the hexagrid in a div HOT 9
- Hover effect won't close HOT 7
- border instead of background color ? HOT 2
- Fixed height and width hexagons HOT 5
- Blurry Text on hover HOT 15
- How to Replace images? <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="" /> HOT 6
- Responsive grid of hexagons not working with Cold fusion header/footer on site HOT 7
- Border and/or Shadow HOT 3
- Using Grid instead of Flex HOT 2
- Show h1 underneath image HOT 2
- The "curtains" of the hexagons do not always close perfectly HOT 7
- Is this repo still maintained? HOT 5
- Increase the spacing between hexagons HOT 1
- Indentation on first row and how to increase the space between hexagons HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from responsive-grid-of-hexagons.