不透明度后徽标移动了一点：1答案

【问题标题】：Logo moves a bit after opacity:1不透明度后徽标移动了一点：1
【发布时间】：2017-08-28 12:15:24
【问题描述】：

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

基本上发生的情况是，如果您向下滚动一页，则会出现右上角的小徽标。从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>

【问题讨论】：

我认为我没有看到它跳跃。但是，如果您将transition 中的all 更改为opacity 会怎样？一旦图像渲染，我确实看到它有点“流行”，但这是显示如此小的非常大的图像的副产品。 codepen.io/mcoker/pen/evXpPr
还有什么元素有.logo-klein class作为脚本中的目标？
我同意迈克尔的建议。您在 70x68 左右显示 1210x1182 像素的图像。您应该缩小原始图像，因为这样可以节省更多带宽并减少加载时间。
是的，我总是在站点完成后更改大小，还有不做任何事情的类，因为我从我的原始代码中复制粘贴了它

标签： html css position css-transitions opacity

【解决方案1】：

这个问题似乎与抗锯齿有关，所以为了修复它，你可以将这个 sn-p 添加到你的 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+ */
}

【讨论】：

【解决方案2】：

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

【讨论】：

@Minegolfer 另一个答案非常有用。我也不知道。