Logo becomes pixelated when it spins

Question

http://jasperalani.com/ If you hover over the logo at the bottom left of the page it becomes super pixelated when you hover over it.

I am using

transform: rotate(360deg);

How can I fix this so it maintains its quality?

The browser does that so save ressources afaik – Tom Doodler Aug 03 '16 at 08:16 — Tom Doodler, Aug 03 '16 at 08:16
did you try `outline: none; ` in your logo css? – ɐlǝx Aug 03 '16 at 08:20 — ɐlǝx, Aug 03 '16 at 08:20

score 2 · Answer 1 · answered Aug 03 '16 at 08:31

That's because you are making you image to transform:rotate(360deg);, instead of that target you parent element .socialmedia and try it works.

.socialmedia {
    position: fixed;
    bottom: 0;
    right: 1;
    width:21px;
    height:21px;
    -webkit-transition: -webkit-transform 0.6s ease-in-out;
    transition: transform 0.6s ease-in-out;
}

img{
    width: 100%;
    height: 100%;
 }
.socialmedia:hover{
    transform:rotate(360deg);
}

.socialmedia {
 position: fixed;
 bottom: 0;
 right: 1;
 width:21px;
 height:21px;
    -webkit-transition: -webkit-transform 0.6s ease-in-out;
   transition: transform 0.6s ease-in-out;
}

img{
 width: 100%;
 height: 100%;
 }
.socialmedia:hover{
 transform:rotate(360deg);
}

<div class="socialmedia">
 <a href="https://ello.co/jasperalani">
 <img id="ello" src="http://jasperalani.com/images/ello_icon.png">
</a>
</div>

Yes @modiX and thanks, because when we rotate our image without any kind of hover effect on it and then you check, it's border still pixelate. Whereas not when placing them in div. — frnt, Aug 03 '16 at 09:13

Martin Braun · Answer 2 · 2016-08-03T08:28:19.703

This is a known problem on Google Chrome.

Usually, you can overcome the problem by adding -webkit-backface-visibility: hidden to your element you rotate. In your example it will remove the anti aliasing entirely, though.

This is, because you are using transition instead of transform, so to fix the problem you rather add outline: 1px solid transparent to the CSS of your image. This will solve the problem.

img {
    width: 21px;
    height: 21px;
    -webkit-transition: -webkit-transform 0.6s ease-in-out;
    transition: transform 0.6s ease-in-out;
    outline: 1px solid transparent;
  }

img:hover {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }

<img id="ello" src="http://jasperalani.com/images/ello_icon.png">

Logo becomes pixelated when it spins

2 Answers2