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;
}
}
