Geek asks and answers

Webkit font rendering when iframe is used to embed flash content

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

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

On firefox on mac this is great.

If you delete the second ARTICLE in html from the YouTube video and run it again, it will perfectly display in webkit.

Any ideas? This, of course, is not just my car doing it.

Thank.

EDIT: Something seems to be related to smoothing. http://jsfiddle.net/CVwXV/3/ If I do this.

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

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

demo

+5
source
3

, , , "" . div, iframe, Flash. div . , z-index iframe, div. , iframe div ( z-index). , - iframe, . - Safari Chrome. z-index iframe , .

+1

markstewie . , . .

- , , . .show() jQuery, .hide(), .

, , , , , , , .

-, flash, , .

, , "-" "". "" ,

-webkit-font-smoothing: ;

.

0

I also had this problem.

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

Now that the iFrame is in an absolutely positioned div, it no longer makes the text on the page smooth out when loading the page in Safari.

0
source

More articles:


All Articles