Here is a code snippet that I am using:
//Code for animating skills on view
document.addEventListener("DOMContentLoaded", function(event) {
function callback(observations, observer) {
observations.forEach(observation => {
if (observation.isIntersecting) { //IF IT'S IN VIEW
observation.target.classList.add('animated');
observation.target.classList.add('animated1');
} else {
observation.target.classList.remove('animated');
observation.target.classList.remove('animated1');
}
});
}
// SETTING UP AN INTERSECTION OBSERVER
let options = {
root: null,
rootMargin: '0px',
threshold: 1.0
}
let observer = new IntersectionObserver(callback, options);
let spans = document.querySelectorAll('span');
for (let i = 0; i < spans.length; i++) {
observer.observe(spans[i]);
}
let spans1 = document.querySelectorAll('line');
for (let a = 0; a < spans1.length; a++) {
observer.observe(spans1[a]);
}
});.master {
display: flex;
}
.master div {
width: 98.6%;
}
@media all and (max-width: 500px) {
.master div {
width: 99.9%;
}
}
@media all and (max-width: 500px) {
.master {
flex-flow: wrap;
}
}
.column-adjustment {
float: left;
width: 50%;
padding: 5px;
}
...
<div class="master">
...
</div>The issue arises when trying to animate elements on iOS devices such as iPhone 14 where the animation glitches like this:
https://i.sstatic.net/sPYMh.gif
I have tried solutions mentioned in this post about CSS animations not working in iOS, including adding web-kit, but the issue still persists. Any insights into why this problem occurs specifically on iOS devices?