CODEWITHSUNDEEP
cssfontswebkit
markstewie
markstewie

Reputation: 9587

Webkit font rendering when iframe used to embed flash content

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.

demo

Upvotes: 5

Views: 1905

Answers (3)

kush
kush

Reputation: 21

I was having this problem too.

I fixed it by placing the iFrame in two divs. The first div I set position: relative, width: 100%, and the height to the desired height of my player. The second div I set to position: absolute.

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.

Upvotes: 0

Jeffpowrs
Jeffpowrs

Reputation: 4540

I followed markstewie's link above and did some tests of my own. Through trial and error I have fixed this problem on the site I am working on. It was occurring in three different instances in safari and in chrome.

The first instance was when showing and hiding a drop down with in the same container as elements containing text. When .show() was called in jQuery the text would become lighter and when .hide() was called it would become heavier.

The second instance was when a fixed element containing text overlapped another element containing text it would become lighter and when the below layer of text moved away the fixed elements copy would again get heavier.

The third was when a flash element loaded onto a page the font would become lighter.

It appears that when the text was becoming lighter the rendering of the font was changing from 'subpixel-antialiased' to 'antialiased'. By forcing 'antialiased' smoothing on all type by setting

-webkit-font-smoothing : antialiased;

on the body the font is rendered with a crisper lighter weight on page load and does not change in any of these instances.

Upvotes: 0

Dustin
Dustin

Reputation: 4459

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.

Upvotes: 1

Related Questions