As for the background image, I opened it up in Safari, Chrome and Firefox and it was identical in each. Are you using the same computer to test out the different browsers? Nothing should cause a difference like that unless you've got some separate CSS going on.
Hey guys, i can't understand how a h1 and a background-image applied to the body can look so different in different browsers....
Here an example: http://cl.ly/image/1F3D352h1r2o
Are there any tricks to get that fixed ? It should actually look like in Safari ;)
Many thanks
That looks like a custom font...that might be the initial starting point.
yes it is but why thats a problem?
Because different browsers use different font files and there are rendering differences as you have noticed.
Can you provide a link to a live site or show us the CSS for how you have implemented the font?
http://codepen.io/Koopax/pen/Ldxeu
I already tried to use an svg for that purpose that there also a rendering problem :(
For Chrome you can try using:
As for the background image, I opened it up in Safari, Chrome and Firefox and it was identical in each. Are you using the same computer to test out the different browsers? Nothing should cause a difference like that unless you've got some separate CSS going on.
Thanks for your reply.
No, i'm using the same computer for testing which is running OS X Mountain Lion And there's only 1 CSS
-webkit-font-smoothing: antialiased; brings no improvment
and I actually linked the wrong pattern, it is not the same as from subtle patterns.com, I darked it up using Photoshop...
Quite strange all that stuff... I will try JPEG perhaps PNG is going crazy ;)
Only the font rendering bug is left :)