Blurry font in chrome and slanted sections

[chloecan]

Hi,

I built a webpage with some slanted sections using the method mentionned here: Rotate background with custom angle (Make section diagonal?)

My page is here; https://www.intuilab.com/games

My issue is that in chrome the font is blurry:

Apparently it is related to a known issue: http://stackoverflow.com/questions/27501435/chrome-text-blurry-when-skew-back-skew-10deg-skew10deg

Anyone have this problem or could give a hand?

[vincent (Vincent Bidaux)]

You can try to extract the title and subtitle from the header element that has a transform. Put it on an element that is over the header, hence not affected by the transform.

Also you can achieve the same design without any transform. Consider adding just an extra background svg item, a white triangle, to the bottom of the header, and you’ll have to rotate nothing.

---

---

[chloecan]

Thanks @vincent for the answer. I think the approach works great for full colors.

The issue with text appears where I’m using gradient backgrounds so not sure the svg trick can work correctly in this case.

[Waldo (Waldo Broodrÿk)]

@chloecan ​CSS Tricks actually just released an article on creating non-rectangular sections yesterday which may be helpful in figuring out the best approach: https://css-tricks.com/creating-non-rectangular-headers/

It sounds like @vincent’s approach will work best by having the text in a separate element that has no skew transforms placed on it.

[vincent (Vincent Bidaux)]

That’s a great article that I have read twice already @waldo

In my opinion, the very best and cleanest, most maintanable solution is to use clip-path. It’s solid, clean, never breaks, easy to change. A complete bummer that it isn’t supported by neither IE nor Edge

[rich_art]

I encountered the same problem and found out that some browsers (e.g. webkit) render fonts on the gpu when some transforms are used. By using “hacks” (you can use the designer for that) the text became sharp. I used “perspective” and “backface”.

In my site the container is rotated (to angle the edges) and the text container is angled back. In the styles you see this:
.ux-filtering-container {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: perspective(1px) rotate(-3deg);
transform: perspective(1px) rotate(-3deg);
}
Again: you can use the designer to add the properties for “backface” and “perspective”. You can find an article on this over here: http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css-transforms/

I hope this will help!

[chloecan]

@rich_art hanks could you please show a webflow screenshot of what you are doing because I’m not clear at all on what to do. That would be really helpful.

Thanks

[rich_art]

mmm, I have my doubts about a screen dump, maybe it won’t explain much. But let’s try. In the transform properties panel you can change te setting for backface and perspective. You have to set it on the container. Hope this will help.