Илья Матвийчук

С плагинами не разобрался, но проблема решена. Взял сервис воркер с другого сайта и подключил его к корню моего сайта

Итак, я накостылял, но кое-как работает.

1. Установил свайпер
   
2. структура свайпера
   

                  <div class="glide">
                       <div class="glide__track" data-glide-el="track">
                           <ul class="glide__slides">
                               <li class="glide__slide">
                                   <div class="glide__slide">
                                       <div class="card">
                                       </div>
                               </li>
                               <li class="glide__slide">
                                   <div class="glide__slide">
                                       <div class="card">
                                       </div>
                               </li>
                               <li class="glide__slide">
                                   <div class="glide__slide">
                                       <div class="card">
                                       </div>
                               </li>
                               <li class="glide__slide">
                                   <div class="glide__slide">
                                       <div class="card">
                                       </div>
                               </li>
                           </ul>
                       </div>
                   </div>

   
   
   
3. css
   

   .glide__slide {
       /* Итак, во всех слайдерах слайды или 100% ширину имеют, или ровно 
       по 2/3/4/5/.. помещаются на экране.
       Но нельзя боковые слайды показывать только на ~10%.
       Поэтому все слайды сдвигаются влево, чтобы кусочек всегда справа был виден */
       transform: translateX(2.4em);
       transition: 0.1s ease-in-out;
       }
       .glide__slide--active {
           /* увеличил и выровнял по центру центральную(активную) карточку */
           transform: translateX(-2.4em) scale(1.1) !important; 
       }

   
   
4. объявление слайдера
   

   var gliide = new Glide('.glide', {
           swipeThreshold: 60,
           dragThreshold: 60,
           rewind: false,
           focusAt: 'center'
   });

   
   
5. Кхм, здесь алгоритм, я уверен, можно было сделать проще, но это работает
   

   gliide.on("run.after", () => {        //событие перелистывания
   
       if(gliide.index == 0){   
   //если перелистнули на первый слайд, то
   // только следующий подвигается влево, чтобы быть справа чуть-чуть видным
   
           $('.glide__slide--active')[0].nextElementSibling.style.transform='translateX(-7.1em)';
       }
       else if(gliide.index >= 1 && gliide.index < ($('.glide__slide').length/2)-1) {
   //если мы на любом, кроме первого и последнего, то следующий и предыдущий двигаются
           $('.glide__slide--active')[0].nextElementSibling.style.transform='translateX(-7.1em)';
           $('.glide__slide--active')[0].previousElementSibling.style.transform='translateX(2.4em)';
       }
       else if(gliide.index == ($('.glide__slide').length/2)-1) {
   //если последний слайд, то двигаем предыдущий
           $('.glide__slide--active')[0].previousElementSibling.style.transform='translateX(2.4em)';
       }
       
   });

   
   
6. 
   

   gliide.on(['mount.after'], () => {
   //при загрузке сайта и слайдера сразу двигаем следующий слайд
       $('.glide__slide--active')[0].nextElementSibling.style.transform='translateX(-7.1em)';
      });

   
   
7. инициализация слайдера
   gliide.mount();
   

mix blend mode

body, html {
    margin: 0;
    height: 100%;
    perspective: 1px;
    overflow-x: hidden;
    overflow-y: auto;
}

parallax {
     transform: translateZ(-1px)
}

всё починилось, когда оставил класс только у img.

<picture>
        <source srcset="img/mount.webp" type="image/webp">
        <img class="png" src="img/mount.jpg">
</picture>
<picture>
        <source srcset="img/forest.webp" type="image/webp">
        <img class="png" src="img/forest.jpg">
</picture>

Но нет возможности проверить на сафари, правильно ли заменяются webp на jpg

Опять отвечаю самому себе

Включение поддержки тега meta viewport для адаптивных сайтов осуществляется посредством добавления всего одной строчки в раздел head веб-страницы:

<meta name="viewport" content="width=device-width, initial-scale=1">

Атрибут name предназначен для того чтобы указать браузеру, какую именно информацию о странице хотим ему сообщить. В данном случае эта информация касается viewport.

Контент (содержимое) этих сведений указывается в качестве значения атрибута content посредством пар ключ-значение, разделённых между собой запятыми.

Для адаптивного дизайна значения атрибута content viewport должно определяться 2 параметрами:

width=device-widthinitial-scale=1

Если же необходимо фиксированный сайт отобразить в браузере мобильного устройства в обычном масштабе (не уменьшенном), то необходимо использовать следующий вид метатега viewport:

<meta name="viewport" content="initial-scale=1">

статья

Это всё-таки фейсбучный. Всем спасибо