徽标在 opacity:1 之后移动了一点

Question

我不知道为什么这里的代码在我的网站上可以工作，但在这里却不能工作，但是你可以在 http://www.bsrp.eu/tijdelijk/index.php 看到它。

基本上发生的事情是，如果您向下滚动一页，右上角的小徽标就会出现。它在 1 秒内从 opacity:0 到 opacity:1。但是当它位于 opacity:1 时，徽标会向右跳转 1 或 2 个像素。

有什么办法可以解决这个问题吗？

$(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">
  <a href="#header"><img src="http://teachersjobworld.com/employer/upload_logo/sample_logo.png"             class="logo"></a>
</div>

Answer 1

我还没有找到真正的原因，但将 transition-property: all 更改为仅不透明度 (tansition: opacity 1s ease) 似乎可以解决问题。

Answer 2

此问题似乎与抗锯齿有关，因此要解决此问题，您可以将此代码段添加到您的 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+ */
}

徽标在 opacity:1 之后移动了一点

Logo moves a bit after opacity:1

html

css

position

opacity

css-transitions