CSS - Абсолютное отрывистое позиционирование в Microsoft Edge

Question

Я реализую функцию скользящей прокрутки, чтобы показать / скрыть фиксированный логотип на прокрутке, как это ...

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.

При прокрутке логотипы прыгают и обычновыглядят вяло.

Кто-нибудь есть идеи, почему это происходит, и если есть обходной путь?

Answer 1

Мое решение без использования Javascript, отправить изображение на задний план и установить background-attachment: fixed; сделать трюк:

img {
  width: 200px;
}

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

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

.gradient {
  background: #15EA24;
}
 
.img {
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
    position: absolute;
}
.img1 {
    background-image: url('https://www.marcoguglie.it/Codepen/SlipScrollEffect/img/skateboard-light.svg');
}
.img2 {
    background-image: url('https://www.marcoguglie.it/Codepen/SlipScrollEffect/img/skateboard-dark.svg');
}
.img3 {
    background-image: url('https://www.marcoguglie.it/Codepen/SlipScrollEffect/img/skateboard-gradient.svg');
}

<div class="container dark">
    <div src="" class="default img img1"></div>
</div>

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

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

Надеюсь, эта помощь.

Answer 2

Я пытаюсь создать проблему с моей стороны с помощью MS Edge и Chrome.

Я считаю, что эта проблема возможна только в том случае, если вы напрямую запускаете код из фрагмента кода Stack Overflow.Но если вы запускаете код в MS Edge или Chrome локально, он работает гладко.

Ниже приведен результат тестирования во фрагменте кода переполнения стека.

Вывод в MS Edge (Microsoft Edge 42.17134.1.0 / Microsoft EdgeHTML 17.17134):

Вывод в хром:

Таким образом, вы можете видеть, что если вы запускаете код в браузере напрямую, то он работает нормально.Я предлагаю вам сделать тест на вашей стороне и сообщить нам о результатах вашего теста.

Answer 3

Одна идея - не использовать Javascript, а использовать чистый CSS.

Ниже приведен пример.

Хитрость заключается в том, чтобы расположить изображения фиксированными, а затем обрезать их.Причина, по которой нам нужен контейнер с клипами, заключается в том, что фиксированная позиция игнорирует переполнение, но не игнорирует клип.

обновление: только что проверил этот фрагмент в Edge, увидит, что его вызывает.

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>