Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Image temporarily blurs when being animated to reduce in size

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #178844
    Max
    Participant

    Hi there!

    I can’t seem to work out how to fix an issue which occurs on a website I am developing, where the logo (a PNG-8 file) in the header blurs when you scroll down the page as it resizes. After a few seconds the image becomes sharp again. It then happens again when scrolling back up the page and the logo resizes.
    Website: http://spm.comxa.com/

    Any ideas would be much appreciated!
    Max

    I got the nav bar from here (all the code used is dispayed on this page):
    http://callmenick.com/2014/02/18/create-an-animated-resizing-header-on-scroll/

    This should be all the relevant CSS from my website for the logo:
    `
    header h10#logo {
    display: inline-block;
    height: 150px;
    line-height: 150px;
    float: left;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    }
    header h10#logo img {
    vertical-align: middle;
    height: 75%;
    width: auto;
    }
    header.smaller {
    height: 75px;
    }
    header.smaller h10#logo {
    width: auto;
    height: 75px;
    line-height: 75px;
    }

    @media all and (max-width: 840px) {
    header h10#logo {
    display: block;
    float: none;
    margin: 0 auto;
    height: 100px;
    line-height: 100px;
    text-align: center;
    }
    header.smaller h10#logo {
    height: 90px;
    }
    }
    `

    #178846
    Paulie_D
    Member

    Sounds like normal behaviour to me although you are scaling a very large image up and down so it will take some time for the browser to redraw it.

    #178847
    Max
    Participant

    Hi Paulie

    Thanks for the reply.

    Yes, after doing a bit of research I thought it would be best to make my image double the size it needed to be to look good on retina displays – should I not do that?

    And so are you suggesting that there is no workaround?

    Cheers,
    Max

    #178849
    Paulie_D
    Member

    And so are you suggesting that there is no workaround?

    I’m sure there are many (SVG for one) but frankly, the only people who re-size browser windows so that this issue would be noticeable are people developing websites.

    Casual browsers just don’t do it. They have a window size and stick to it.

    #178884
    Max
    Participant

    Hi Paulie,

    I agree with you, but the effect I have implemented is that when you scroll down the page, the image resizes, and the blurriness is quite noticeable.

    #178896
    Soren
    Participant

    Could you not use CSS background image instead for the logo? Then via a media query swap the background image to a smaller version.

    Or use PictureFill.

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.