Изображения отображаются в Chrome и Firefox, но не в Safari

Question

Эта строка кода работает в других браузерах, но не в Safari.Я пробовал много добавленных строк JavaScript, но, похоже, ничего не работает.сайт www.wthn.com

, пожалуйста, помогите.

спасибо

<div class="product-featured-images js-sticky"> 

    <img class="js-featured-image featured-image active" src="https://cdn.accentuate.io/1998318305337/5012029440057/Fully%20Charged%20(HP).jpg?1856x2193" data-section="how-to-use"> 

    <img class="js-featured-image featured-image" src="https://cdn.accentuate.io/1998318305337/5012025999417/Fully%20Charged%20(Compressed).png?683x1024" data-section="benefits"> 

    <img class="js-featured-image featured-image" src="https://cdn.accentuate.io/1998318305337/5012026032185/Fully%20Charged.jpg?1080x1080" data-section="ingredients"> 

</div>

основной css на изображениях:

.product-featured-images {
  height: 100vh;
  position: relative;
  z-index: -1; }

.product-featured-images.is-sticky {
  position: fixed;
  width: 50%;
  top: 0; }

.product-featured-images.is-stuck-bottom {
  position: absolute;
  width: 50%;
  bottom: 0; }

.featured-image {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  object-fit: cover; }

.featured-image.active {
  opacity: 1; }