javascript - CSS - Microsoft Edge 中的绝对定位不稳定

Question

我正在实现滑动滚动功能来显示/隐藏滚动上的固定 Logo ...

var setLogo = function() {
 $('.moveable').each(function() {
    $(this).css('top',
      $('.default').offset().top -
      $(this).closest('.container').offset().top
    );
  });
};
 
$(document).scroll(function() {
  setLogo();
});
 
setLogo();

img {
  width: 200px;
}

.container {
  overflow: hidden;
  position: relative;
  min-height: 600px;
  padding: 1em;
}

.dark {
  background: #333;
}
 
.light {
  background: #fff;
}

.gradient {
  background: #15EA24;
}

.default {
  position: fixed;
}
 
.moveable {
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container dark">
  <img src="https://www.marcoguglie.it/Codepen/SlipScrollEffect/img/skateboard-light.svg" class="default">
</div>
 
<div class="container light">
  <img src="https://www.marcoguglie.it/Codepen/SlipScrollEffect/img/skateboard-dark.svg" class="moveable">
</div>

<div class="container gradient">
  <img src="https://www.marcoguglie.it/Codepen/SlipScrollEffect/img/skateboard-gradient.svg" class="moveable">
</div>

除了 Microsoft Edge 之外，我尝试过的所有浏览器都看起来很棒。

滚动时， Logo 跳来跳去，通常看起来不稳定。

任何人都知道为什么会发生这种情况以及是否有解决方法？

Answer 1

一个想法是不使用 Javascript，而是使用纯 CSS。

下面是一个例子。

诀窍是，将图像定位固定，然后剪裁它们。我们需要 clip 容器的原因是 position fixed 会忽略溢出，但不会忽略 clip。

update: just tested this snipped in Edge, will see what's causing it.

img {
  width: 200px;
}

.container {
  position: relative;
  height: 600px; 
}

.clipper {
  position: absolute;
  clip: rect(0, auto, auto, 0);
  width: 100%;
  height: 100%;
}

.dark {
  background: #333;
}
 
.light {
  background: #fff;
}

.gradient {
  background: #15EA24;
}


.moveable {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container dark">
  <div class="clipper">
    <img src="https://www.marcoguglie.it/Codepen/SlipScrollEffect/img/skateboard-light.svg" class="moveable image1">
  </div>
</div>

 
<div class="container light">
  <div class="clipper">
<img src="https://www.marcoguglie.it/Codepen/SlipScrollEffect/img/skateboard-dark.svg" class="moveable image2">
  </div>
</div>


<div class="container gradient">
 <div class="clipper">
  <img src="https://www.marcoguglie.it/Codepen/SlipScrollEffect/img/skateboard-gradient.svg" class="moveable image3">
 </div>
</div>