Treehouse: Grow your CSS skills. Land your dream job.

Problems with cross-browser appearance (Font rendering & background brightness)

  • # October 28, 2012 at 7:07 am

    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:

    Are there any tricks to get that fixed ? It should actually look like in Safari ;)

    Many thanks

    # October 28, 2012 at 7:10 am

    That looks like a custom font…that might be the initial starting point.

    # October 28, 2012 at 7:25 am

    yes it is but why thats a problem?

    # October 28, 2012 at 7:28 am

    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?

    # October 28, 2012 at 7:35 am

    I already tried to use an svg for that purpose that there also a rendering problem :(

    # October 28, 2012 at 1:17 pm

    For Chrome you can try using:

    -webkit-font-smoothing: antialiased;

    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.

    # October 28, 2012 at 1:30 pm

    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

    # October 28, 2012 at 1:51 pm

    -webkit-font-smoothing: antialiased; brings no improvment

    and I actually linked the wrong pattern, it is not the same as from subtle, I darked it up using Photoshop…

    Quite strange all that stuff… I will try JPEG perhaps PNG is going crazy ;)

    # October 28, 2012 at 3:33 pm

    Only the font rendering bug is left :)

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.