'Image animation resets page scroll on mobile devices

EDIT 2: I just figured it out. The overflow css property applied on the body is not being inherited by the slideshow div. Adding "overflow: hidden" to the slideshow div fixed it.

ORIGINAL POST

I have a webpage with an image slideshow. The slideshow is set to run every 5 seconds using setInterval and calling the below function:

function startSlideShow() {
  console.log('starting slideshow');
  const img = slideImages.shift();
  img.style.zIndex = 0
  slideImages.push(img);
  slideImages[0].style.zIndex = 10;
  slideImages[0].style.display = "block";

  removePreviousImage(img);
}

The animation keyframe:

@keyframes slide {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0);
  }
}

The structure of the page is:

Header
Slideshow
Other Content

The header "position: sticky", so it should always be visible.

The Problem: On mobile or responsive mode on browser dev tool, when I scroll down while the animation is running, the header is not visible, i.e it is ignoring the "position: sticky" css rule. Once the animation completes, the page resets the scroll position back to the top.

It works as expected on desktop, i.e the header is always visible at the top of the screen and the scroll position does not get reset.

I am still learning and I don't understand what is causing the issue and why only on mobile? Tried google but no luck, mostly because I am not sure what to search for.

EDIT: Recreated the problem as per the code below:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Slideshow</title>
  <style>
    body {
      min-height: 100%;
      font-family: Helvetica,
        Arial,
        sans-serif;
      overflow-x: hidden;

      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }

    .preload * {
      animation: none !important;
    }

    img {
      max-width: 100%;
      height: auto;
    }

    .main__overlay {
      z-index: 200;
    }

    .image-slider__overlay {
      z-index: 1000;
    }

    .header {
      z-index: 2000;
    }

    .header {
      text-transform: uppercase;
      padding: var(--size1) var(--size0);
      opacity: 0.9;
      position: sticky;
      top: 0;
      left: 0;
      width: 100%;
      background-color: #fff;
    }

    .image-slider {
      position: relative;
    }

    .image-slider__img {
      position: absolute;
      top: 0;
      left: 0;

      animation-name: slide;
      animation-duration: 3s;
    }

    .no-slide {
      aspect-ratio: attr(width) / attr(height);
    }

    @keyframes slide {
      from {
        transform: translateX(100%);
      }

      to {
        transform: translateX(0);
      }
    }
  </style>
</head>

<body>

  <body class="preload">
    <header class="header">
      <h1 class="header__logo">Earthen Karkhana</h1>
    </header>

    <div class="image-slider">
      <div class="no-slide">
        This div will be an image is the actual code. Image 1
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi odit, dolore omnis voluptates, accusantium
          architecto eos nulla totam facere eum numquam temporibus error. Saepe aliquid asperiores veritatis sit
          inventore repudiandae.
          Quam ut praesentium reprehenderit necessitatibus ab voluptatibus esse laborum enim, veniam exercitationem quia
          autem cum nihil et officiis itaque vero quasi distinctio. Quidem, ad a ipsum nihil incidunt ipsa libero!
        </p>
      </div>

      <div class="image-slider__img">
        This div will be an image is the actual code. Image 2
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi odit, dolore omnis voluptates, accusantium
          architecto eos nulla totam facere eum numquam temporibus error. Saepe aliquid asperiores veritatis sit
          inventore repudiandae.
          Quam ut praesentium reprehenderit necessitatibus ab voluptatibus esse laborum enim, veniam exercitationem quia
          autem cum nihil et officiis itaque vero quasi distinctio. Quidem, ad a ipsum nihil incidunt ipsa libero!
        </p>
      </div>
      <div class="image-slider__img">
        This div will be an image is the actual code. Image 3
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi odit, dolore omnis voluptates, accusantium
          architecto eos nulla totam facere eum numquam temporibus error. Saepe aliquid asperiores veritatis sit
          inventore repudiandae.
          Quam ut praesentium reprehenderit necessitatibus ab voluptatibus esse laborum enim, veniam exercitationem quia
          autem cum nihil et officiis itaque vero quasi distinctio. Quidem, ad a ipsum nihil incidunt ipsa libero!
        </p>
      </div>
      <div class="image-slider__img">
        This div will be an image is the actual code. Image 4
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi odit, dolore omnis voluptates, accusantium
          architecto eos nulla totam facere eum numquam temporibus error. Saepe aliquid asperiores veritatis sit
          inventore repudiandae.
          Quam ut praesentium reprehenderit necessitatibus ab voluptatibus esse laborum enim, veniam exercitationem quia
          autem cum nihil et officiis itaque vero quasi distinctio. Quidem, ad a ipsum nihil incidunt ipsa libero!
        </p>
      </div>
    </div>

    <section class="projects__main">

      <h2 class="projects-link--heading body_text">
        Projects
      </h2>

      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi odit, dolore omnis voluptates, accusantium
        architecto eos nulla totam facere eum numquam temporibus error. Saepe aliquid asperiores veritatis sit inventore
        repudiandae.
        Quam ut praesentium reprehenderit necessitatibus ab voluptatibus esse laborum enim, veniam exercitationem quia
        autem cum nihil et officiis itaque vero quasi distinctio. Quidem, ad a ipsum nihil incidunt ipsa libero!
        Autem reiciendis fugit quis, perspiciatis nihil sit aliquam impedit dicta placeat veritatis culpa voluptate nisi
        aut consectetur unde, alias et fugiat quisquam dolor distinctio eos dolore non error! Id, optio.
        Omnis excepturi delectus inventore ullam harum accusamus sed consequatur autem quo obcaecati mollitia corrupti
        amet, eaque veritatis, sit dolorum voluptates id atque rem, ipsam officia? Architecto magni dignissimos sint
        dolorem!
        Doloremque enim nobis eum esse nihil. Fugiat nesciunt obcaecati omnis. Doloribus harum deserunt sapiente omnis
        quasi aut voluptatum consequatur perferendis, tempora nulla blanditiis labore vitae provident repellendus,
        eveniet sit quas.
        Nemo, quos perspiciatis modi repudiandae delectus doloremque. Vero dolores blanditiis itaque consequatur minus
        distinctio, sapiente corporis, suscipit ratione tenetur animi sit eius quod dolorem nobis sed pariatur tempora
        natus ea.
        Quam sequi distinctio adipisci dolor? Asperiores exercitationem eveniet eum architecto voluptates, tempore saepe
        sint eius quisquam odit veritatis debitis eligendi ab impedit, officia nam! Libero tenetur ad consequuntur eos
        natus.
        Corporis pariatur eius velit ad sequi facere impedit quia laboriosam quos? Eum, labore minima temporibus placeat
        sunt totam neque, quod harum facilis reiciendis doloribus aliquid dolor saepe distinctio expedita sint.
        Repellat, ipsam! Omnis nihil maiores amet excepturi velit, deleniti minus voluptatibus quasi vel, magni aperiam
        veritatis non asperiores, nisi dolorum hic eligendi ipsa? Omnis id esse hic non sed est!
        Qui accusantium dignissimos natus corporis asperiores, perferendis eveniet ab et, consequuntur vitae officiis
        nulla consequatur obcaecati magni corrupti nihil neque nam iste quidem! Libero eos est, beatae error praesentium
        eligendi!
      </p>

    </section>
    <script>
      "use strict";

      const slideImages = Array.from(document.querySelectorAll(".image-slider__img"));

      // Wait for page to load before starting slideshow
      window.addEventListener('load', (e) => {
        document.querySelector("body").classList.remove("preload");

        // slideshow should only run on index page 
        if (document.querySelectorAll(".image-slider__img").length == 0) return;

        // Static image not required to be visible once slide images are loaded in
        setTimeout(() => document.querySelector(".no-slide").style.opacity = 0, 8000);

        slideShow();
      });


      function slideShow() {
        slideImages.forEach((img, index) => {
          img.style.display = "none";
        });

        console.log(slideImages);
        let animationInterval = setInterval(startSlideShow, 5000);
      }

      function startSlideShow() {
        console.log('starting slideshow');
        const img = slideImages.shift();
        img.style.zIndex = 0
        slideImages.push(img);
        slideImages[0].style.zIndex = 10;
        slideImages[0].style.display = "block";

        removePreviousImage(img);
      }

      function removePreviousImage(img) {
        setTimeout(function () { img.style.display = "none" }, 3000);
      }
    </script>
  </body>

</html>

If viewed in responsive mode in dev tools the page layout changes when the animation is running, but that does not happen on desktop mode.

In desktop mode, resizing the browser to match width of a mobile device does not trigger the problem.

Solution 1:^[1]

I guess your browser doesnt support position : sticky; try to use another browsers like chrome . ?????? and I highly recommend You better to use "browser-prefixes" .

You can read about "browser-prefixes" in : https://www.thoughtco.com/css-vendor-prefixes-3466867

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Ozone

'Image animation resets page scroll on mobile devices

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]