Question

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

基本上会发生什么，如果向下滚动1页，则会出现右上角的小徽标。它从opacity:0到opacity:1持续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

此问题似乎与抗锯齿相关，因此为了解决此问题，您可以将此代码段添加到您的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

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

不透明后，徽标会稍微移动：1

2 个答案: