How to make CSS image transition smooth? -


i'm working on blog, , stumbled upon thing fix, i've got no idea how it. when scroll down page, header sticks top , shrinks smaller size. that's how , works.

the logo shrink too, when transition takes place or when drag scrollbar , hold while, logo goes jagged. once stop scrolling logo smoothens again, i'd smooth while transitioning, instead of smoothing áfter transitioning. there way can this, , if so, how?

you can see website here; http://tidychaotic.nl. below picture shows happens:

logo jagged http://imgdump.nl/hosted/fc5448a0f5e23978e6ac1cb32ea7d0ec.png

here code i'm using. #masthead bigger header , #masthead.fixed-header smaller one.

#masthead {      background-color: #fff;     border-bottom: 1px solid #eee;     z-index: 999;     width: 100%;      -moz-transition: 0.5s ease-in-out;      -webkit-transition: 0.5s ease-in-out;      transition: 0.5s ease-in-out;  }  #masthead.fixed-header {     position: fixed;     top: 0;     min-height: 35px;      box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);     -moz-box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);      -webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.1); } 

oh okay. link , picture included understand wrong.

in fact, what's happenning logo called aliasing , due original width , height of image.

try scaling (resize 177x41px one) , work way want ;-)


Comments

Popular posts from this blog

java - How to specify maven bin in eclipse maven plugin? -

single sign on - Logging into Plone site with credentials passed through HTTP -

php - Why does AJAX not process login form? -