Webkit font rendering when iframe used to embed flash content

Question

Please see http://jsfiddle.net/CVwXV/2/ if you are on a Mac.

When you look at this on Chrome or Safari (webkit) on mac the text jumps to a much lighter shade/color.

On firefox on mac it's fine.

If you remove the second ARTICLE in the html with the youtube video in it and run again, it renders fine in webkit.

Any ideas? It's surely not just my machine doing this.

Thanks.

EDIT: Seems to be something to do with antialiasing. http://jsfiddle.net/CVwXV/3/ If I do..

-webkit-font-smoothing: antialiased !important;
font-smoothing: antialiased !important;

Then there is no jump... but it still looks A LOT different between firefox and chrome. FF on left, Chrome on right.

Answer 1

Alright, I've been having this same issue and I think I found an "ok" solution. I had a div that was slightly overlapping an iframe that had Flash inside of it. That overlapping div had it's font-smoothing screwed up. To fix it I just had to put z-index on both the iframe and the overlapping div. To make it work the iframe has to be on top of the div (higher z-index). In the example above it doesn't appear that anything is overlapping the iframe, but the boundary of each element could be overlapping slightly. You'd be able to see it by using the web inspector in Safari or Chrome. But I'd just start by putting z-index on the iframe and the elements that have messed up font-smoothing.