I am building a small app with a horizontal infinite scroll animation containing a set of images. In essence, it looks like this:
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="main.css">
<title>Example</title>
</head>
<body>
<div id="container">
<div id="photos_container">
<div id="photos_scroller">
<img src="https://picsum.photos/1000" alt="ID 111111">
<img src="https://picsum.photos/1000" alt="ID 111112">
<img src="https://picsum.photos/1000" alt="ID 111113">
<img src="https://picsum.photos/1000" alt="ID 111114">
<img src="https://picsum.photos/1000" alt="ID 111111">
<img src="https://picsum.photos/1000" alt="ID 111112">
<img src="https://picsum.photos/1000" alt="ID 111113">
<img src="https://picsum.photos/1000" alt="ID 111114">
</div>
</div>
</div>
</body>
</html>
main.css
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
font: inherit;
}
html,
body {
height: 100%;
}
body {
display: grid;
place-items: center;
background-color: #1f1f1f;
}
#container {
width: 95vw;
padding-inline: 1rem;
}
#photos_container {
overflow: hidden;
}
#photos_scroller {
display: flex;
gap: 1rem;
width: max-content;
animation: slide var(--move_duration, 10s) linear infinite;
}
#photos_scroller > img {
max-height: 50vh;
transform: translateZ(0); /* to prevent flickering images */
}
@keyframes slide {
to {
transform: translate(calc(-50% - 0.5rem));
}
}
In Chrome on a MacBook, this works fine. However, on Safari, as well as in Safari and Chrome (?!?) on an iPad the images are hardly moving.
Adding a delay to the animation solves the issue, so my hypothesis is that the animation and the corresponding distance are calculated differently in different browsers. Specifically, in the mentioned cases, I suppose the animation is based on the layout at a point in time when the photos have not yet been downloaded.
Also, after tilting the iPad from landscape to portrait and back to landscape orientation the animation runs correctly, so I guess, after the repaint the animation is correctly calculated based on the then available images.
Can someone please explain to me the mechanics that are at play here? What is the recommended way to handle this issue, in particular when images are added or removed dynamically with JavaScript?