3

When page gets any way of movement - window resizing, scrolling, hover, images used as icons does re-render and makes sides ruff, its very well seen on images with transparent background and circular border (like in example), is there any way to fix that? Example

<body>
    <style>
        body{
            background: black;
        }
        img{
            max-width: 5vw;
            transition: 1s ease;
        }
        img:hover{
            max-width: 6vw;     
        }
    </style>
    <img src="http://www.iconsdb.com/icons/preview/white/whatsapp-xxl.png">


</body>

in this case when hovered, image will appear with sharp borders, some may say pixelated, and after some miliseconds it will go back to smooth borders, here is a fiddle for you - http://jsfiddle.net/o3qk5uaL/

SweG
  • 31
  • 1
  • 3
  • 1
    [Try taking a look here](http://stackoverflow.com/questions/9986226/when-scaling-an-element-with-css3-scale-it-becomes-pixelated-until-just-after-t). This is just a workaround and may not work in some older browsers. – Calvin Scherle Oct 21 '14 at 13:58
  • 2
    +1, good question. That's a nuisance. I don't have the answer (I tried messing with the backface visibility but it didn't work), so the only alternative I can offer is the use of SVG's instead. Scaling vector images is a lot sharper. –  Oct 21 '14 at 13:59
  • No, scaling svg in webkit browsers have the same problem. It works just fine in Firefox i.g. but not on Safari. Seems that Safari caches the first state of svg into a kind of a bitmap and uses that to display scaled sizes afterwards. No matter if you use svg or png or whatever. Only solution is to implement svg (or png) downscaled and set relative “native” higher dimensions and than scale up to max transform: scale(1). – Garavani Mar 12 '17 at 10:21

1 Answers1

1

Good question!

This is not a problem, its how the web-browser renders the picture and how the transition acts - you are repainting the picture by binding the picture to a dynamic window size ratio - the picture size is being recalculated and the browser will not paint it completely until you stop. The original picture has its resolution and will look the best at its original resolution when changing that the picture need to be rendered at the new resolution and that is browser dependent, and GPU dependent.

I Found a small workaround that may help you - Try Using SVG format for those very dynamic resolution changing icons. The SVG Doesn't have any resolution its an XML-based vector image format and they are great for interactivity and animation.

Take a look at this comparison Demo: CodePen

CODE: because we have to...

<img src="http://www.iconsdb.com/icons/preview/white/whatsapp-xxl.png" />
<br /><br />
<img src="http://8tracks.com/assets/brand/8_icon_white.svg" />
Shlomi Hassid
  • 6,500
  • 3
  • 27
  • 48