Webkit - Font Smoothing

[zslabs]

Hi,
I'm noticing a different in the anti-aliasing on in Webkit for text within flex-slider. From the image (below) the top text is from a paragraph outside flex slider - and the other, inside (the lower-text is skinnier). I believe I've traced the issue down to .flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} The backface-visibility seems to be messing with text-rendering. I've tried a few ways to "re-add" what the rest of the site has, but no such luck as of yet. Any suggestions here? Thanks.

[sbone]

I hope this issue gets resolved in Webkit soon, but in the meantime you bypassed the issue by simply setting the useCSS option to false.

[zslabs]

Ah - that sucks. Appreciate it!

[tylernotfound]

Some implementations don't require -webkit-backface-visibility: hidden. Try removing it and if that doesn't solve your issue, use useCSS: Modernizr.touch for now. Mobile tends to be perfectly fine with the new properties and text rendering.

Thanks @sbone for jumping on this one.

[ry5n]

This problem appears to be caused by Webkit turning off sub-pixel antialiasing during the transition. Lanyrd discovered that setting the animated element's z-index so that it is above all other elements in the stacking order will fix the issue. See http://www.youtube.com/watch?v=9Woaz-cKPCE&hd=1. And it works! Another option is to set -webkit-font-smoothing: antialiased which turns off sub-pixel aa permanently.

[zslabs]

Very cool (and still annoying at the same time) - going to give this a shot. Thanks!

[robhuska]

I cannot make any of these solutions work. I have also noticed that the slider is also effecting elements that are not even within the flexslider html. For example, my navigation which drops down in front of the slider, the text inside the dropdowns is thin and fuzzy. But if I inspect the page and delete the slider out of the page the text becomes normal again.

[tayvano]

I doubt anyone needs this.....4 years later....but here's your solution since some clients absolutely need their font-smoothing and sliding: #1626