Webkit font-smoothing bug when iframe with Flash is on page. Is there a work-around?

Question

I've ran into a nasty bug with Chrome and Safari on Mac. It appears that its related to font-smoothing and whether or not the page has an iframe with Flash inside of it.

When I remove the iframe the text looks like it is set to font-smoothing: subpixel-antialiased (browser default). But when the iframe is on the page (with Flash running inside of it) the text appears to be set to font-smoothing: antialiased.

Is there any work-around for this? Please see screenshots below.

Answer 1

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.

Answer 2

I was having this problem too and fixed it like this:

.video1 { position: relative; height: 338px; width: 100%; }
.video1 > div { position: absolute; }

Then I placed the iFrame inside the second div. With the iFrame now in an absolutely positioned div, it no longer forces the text on the page to be antialiased upon page load in Safari.