Logo moves a bit after opacity:1 - html

Question

I don't know why the code under here doesn't work here while it works on my website, but you can see it at http://www.bsrp.eu/tijdelijk/index.php .
Basicly what happens, is that if you scroll down 1 page, the little logo in the upper-right corner appears. It goes in 1 second from opacity:0 to opacity:1.
But when it is at opacity:1 the logo jumps 1 or 2 pixels to the right.
Is there some way to fix this?
$(function () {
$(window).bind('scroll', function () {
if ($(window).scrollTop() > (window.innerHeight*0.3)) {
$('.logo-klein').addClass('show').removeClass('fade');
}
else {
$('.logo-klein').removeClass('show').addClass('fade');
}
});
});
.for_extra_scroll{
height: 200vh;
}
.logo{
height: 250px;
padding: .25vh;
float: right;
position: fixed;
right: 20px;
opacity: 0;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.show {
opacity: 1;
}
.fade{
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="for_extra_scroll">
<img src="http://teachersjobworld.com/employer/upload_logo/sample_logo.png" class="logo">
</div>

Answer 1

This issue seems to be related with Anti-aliasing so in order to fix it, you can add this snippet to your css:
img {
image-rendering: optimizeSpeed;
image-rendering: -moz-crisp-edges; /* FF 3.6+ */
image-rendering: -o-crisp-edges; /* Opera 28+ */
image-rendering: -webkit-optimize-contrast; /* Chrome 41+ (and Safari 6+) */
image-rendering: optimize-contrast; /* CSS3 Proposed */
-ms-interpolation-mode: nearest-neighbor; /* IE8+ */
}

Answer 2

I haven't found the actual reason yet but changing transition-property: all to only opacity (tansition: opacity 1s ease) seems to fix the problem.