Question

I’m noticing a difference in the anti-aliasing in Webkit for text within an element that uses backface-visibility. From the image (below) the top text is from a paragraph outside the noted area – 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 (for example – using the suggestions here). Any suggestions? Thanks.

Answer 1

backface-visibility has caused major problems and issues for me before, like with google-maps and with forms.

Best bet is to force it to be disabled on problematic elements.

.flexslider .slides > li {display: none; -webkit-backface-visibility: none !important;}