I am using font Segoe UI and in a particular section on the site, the font is very blurred in Google Chrome.
I am also uploading the live site: http://impressivefirm.com/dynamics365
Below are the images for comparison:
I don't think this has anything to do with the selected font, although there might be fonts that don't exhibit this bug. Have a look at Woodrow's answer
on a similar question.
In short, the problem's root is the fact you are skewing and translating twice in order to get the hex shape .
From a specific technical point of view, I think you'll only get a clear answer from someone with intimate knowledge on how Chrome's rendering engine works and specifically how anti-aliasing is applied to text.
What's notable is that it's a rendering engine with a fairly large usage, powering Chrome, Android Browser and Opera. I believe you're roughly looking at 60 - 70% of internet users.
Looking for a practical solution, you can get around your problem by having two separate containers, one on top of each other: one containing the background of the hex, without any contents (applying the correct shape) and one transparent, not rotated or skewed at all, with the actual text. This will bring you the disadvantage of having rectangular links when you probably want hexagonal links.
The second solution, and what I believe it's the proper way to make a hex grid is the clip-path
technique, combined with proper margins alignment and possibly doable with flexbox
.
Edit:
Here is a trimmed down and simplified version of your example, using clip-path
. I tried to keep mods to your initial CSS
to a minimum and only removed what was breaking my example. Here's what I did:
@import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,700'); body {font-family: 'Noto Sans', sans-serif;background-color: #369;} #hexGrid { display: flex; flex-wrap: wrap; max-width: 840px; margin: 0 auto; overflow: hidden; font-size: 1.1066819197003217rem; line-height: 1.5rem; list-style-type: none; padding: 48px 0; } .hex { position: relative; outline: 1px solid transparent; -webkit-clip-path: polygon(50% 0%, 98% 25%, 98% 75%, 50% 100%, 2% 75%, 2% 25%); clip-path: polygon(50% 0%, 98% 25%, 98% 75%, 50% 100%, 2% 75%, 2% 25%); background-color: white; margin-bottom: -7vw; box-sizing: border-box; height: 33vw; } @media (min-width: 680px) { .hex { height: 224px; margin-bottom: -48px; } } @media (max-width: 600px) { .hex { height: 50vw; margin-bottom: -10.8vw; } } .hex::after { content: ''; display: block; padding-bottom: 86.602%; /* = 100 / tan(60) * 1.5 */ } .hexIn { position: absolute; width: 96%; margin: 0 2%; height: 100%; } .hexIn * { position: absolute; visibility: visible; } .hexLink { display: block; width: 100%; height: 100%; text-align: center; color: #fff; overflow: hidden; border: none; } /*** HEX CONTENT **********************************************************************/ .hex h1, .hex p, .hex .icon { width: 100%; box-sizing: border-box; color: #000; font-weight: 300; } .hex .icon { height: 48px !important; top: 45%; display: block; z-index: 2; transform: translate3d(0,-100%,0); } .hex p { top: 60%; z-index: 1; transform: translate3d(0,-100%,0); } .hex h1 { top: 27%; transform: translate3d(0,100%,0); font-size: 20px !important; letter-spacing: 1px; } /*** HOVER EFFECT **********************************************************************/ /* *.hexLink:hover h1, .hexLink:focus h1, *.hexLink:hover p, .hexLink:focus p{ * -webkit-transform:translate3d(0,0,0); * -ms-transform:translate3d(0,0,0); * transform:translate3d(0,0,0); *} * */ /*** HEXAGON SIZING AND EVEN ROW INDENTATION *****************************************************************/ @media (min-width:1201px) { /* <- 5-4 hexagons per row */ #hexGrid { padding-bottom: 4.4%; } .hex { width: 25%; /* = 100 / 5 */ } .hex:nth-child(7n+5) { /* first hexagon of even rows */ margin-left: 12.5%; /* = width of .hex / 2 to indent even rows */ } } @media (max-width: 1200px) and (min-width:901px) { /* <- 4-3 hexagons per row */ #hexGrid { padding-bottom: 5.5%; } .hex { width: 25%; /* = 100 / 4 */ } .hex:nth-child(7n+5) { /* first hexagon of even rows */ margin-left: 12.5%; /* = width of .hex / 2 to indent even rows */ } } @media (max-width: 900px) and (min-width:601px) { /* <- 3-2 hexagons per row */ #hexGrid { padding-bottom: 7.4%; max-width: 640px; } .hex { width: 33.333%; /* = 100 / 3 */ } .hex:nth-child(5n+4) { /* first hexagon of even rows */ margin-left: 16.666%; /* = width of .hex / 2 to indent even rows */ } } @media (max-width: 600px) { /* <- 2-1 hexagons per row */ #hexGrid { padding-bottom: 11.2%; } .hex { width: 50%; /* = 100 / 3 */ } .hex:nth-child(3n+3) { /* first hexagon of even rows */ margin-left: 25%; /* = width of .hex / 2 to indent even rows */ } } @media (max-width: 400px) { #hexGrid { font-size: 13px; } }
<ul id="hexGrid"> <li class="hex"> <div class="hexIn"> <a class="hexLink" href="https://www.microsoft.com/en-us/dynamics365/sales" target="_blank"> <div class="filler"></div> <svg class="icon"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/vectors/sprite.svg#strengthandscale"></use> </svg> <p>Dynamics 365 for</p> <h1>Sales</h1> </a> </div> </li> <li class="hex"> <div class="hexIn"> <a class="hexLink" href="https://www.microsoft.com/en-us/dynamics365/customer-service" target="_blank"> <svg class="icon"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/vectors/sprite.svg#customer-service"></use> </svg> <p>Dynamics 365 for</p> <h1>Customer Service</h1> </a> </div> </li> <li class="hex"> <div class="hexIn"> <a class="hexLink" href="https://www.microsoft.com/en-us/dynamics365/operations" target="_blank"> <svg class="icon"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/vectors/sprite.svg#operations"></use> </svg> <p>Dynamics 365 for</p> <h1>Operations</h1> </a> </div> </li> <li class="hex"> <div class="hexIn"> <a class="hexLink" href="https://www.microsoft.com/en-us/dynamics365/financials" target="_blank"> <svg class="icon"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/vectors/sprite.svg#financials"></use> </svg> <p>Dynamics 365 for</p> <h1>Financials</h1> </a> </div> </li> <li class="hex"> <div class="hexIn"> <a class="hexLink" href="https://www.microsoft.com/en-us/dynamics365/field-service" target="_blank"> <svg class="icon"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/vectors/sprite.svg#field-service"></use> </svg> <p>Dynamics 365 for</p> <h1>Field Service</h1> </a> </div> </li> <li class="hex"> <div class="hexIn"> <a class="hexLink" href="https://www.microsoft.com/en-us/dynamics365/project-service-automation" target="_blank"> <svg class="icon"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/vectors/sprite.svg#project-service"></use> </svg> <p>Dynamics 365 for</p> <h1>Project Service</h1> </a> </div> </li> <li class="hex"> <div class="hexIn"> <a class="hexLink" href="https://www.microsoft.com/en-us/dynamics365/marketing" target="_blank"> <svg class="icon"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/vectors/sprite.svg#marketing"></use> </svg> <p>Dynamics 365 for</p> <h1>Marketing</h1> </a> </div> </li> </ul>
Side notes:
Best regards and happy coding! :: }<(((*> ::
I resolved the issue by going in Chrome to SETTINGS>>>ADVANCED>>>SYSTEM and turned off/disabled "Use Hardware Acceleration When Possible". I've seen this type of error before in the XP era - related to certain graphic driver/updates - which affected Adobe reader/full products. Remove the drivers (version translation) component specific to the browser and and the apps will default to the OS settings.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.