It seems like a timing issue known as a "race condition" occurring during the page load process. The JavaScript executes before the image request is fully processed.

To comprehend the problem, it is crucial to understand the loading sequence:

1. Upon loading/reloading, the Server responds with the document (*.html) file

2. The browser begins parsing the response (*.html) and initiates new requests for each identified resource:

   • CSS
   • JavaScript (JS)
   • Images (IMGs)

3. These requests finalize in an unpredictable order. For instance, larger images may take longer to load than a *.css file,... certain resources might already be cached by the browser and hence won't trigger a request at all,...

   If the request for the *.js file finalizes prior to the completion of the IMGs request, there won't be a calculated height available for that image and the newly appended CSS class is-visible will still trigger the transition regardless...

4. Once the IMG requests are completed (image gets rendered), a Content Reflow is activated for the IMG embedding An ongoing transition on elements needing repainting (the IMG) is interrupted and restarts from keyframe 0. This could elucidate the encountered issue.

---

Here are three potential solutions to resolve the Issue:

A. Retain the ultimate size of the image.

• Specify a fixed height in CSS and include a dedicated class in the HTML:

  .myImg {
    width: 50px;
    height: 50px;
  }
  

• You can also include width and height as attributes within the HTML. This ensures that the final dimensions are accessible in JS even when *.css is still loading...

  <img height="50" width="50" class="..." src="...">
  

B. Integrate some form of "load detection" for the images and delay the transition until the image loads entirely.

• We verify whether the img is already loaded: src is assigned and height is determined-
• If not, establish an onload event for that particular image (since it's not yet loaded)
• Additionally, you have the option of utilizing lazy loading for that image and solely loading images 'on demand' (refer to the provided example). The img´s src is featured as a data-src attribute and src is set via JS once the image becomes available.

Now, employing a isLoaded(element) function enables the exclusion of incompletely loaded images within .scroll().

Visit this jsFiddle, or delve into the illustration below...

(previously shown code snippets included for brevity)

C. Await the load event of the document

You can encapsulate your JS initialization code within a load event pertaining to the entire document. This event triggers after all resources (CSS, IMG,..) have been completely loaded.

window.addEventListener('load', (event) => {
    // Insert JS init code here (images are fully loaded at this point!)
});

Upon testing your code in the Chrome browser on an iPhone, I was unable to replicate the bug seen in your screen recording.

Could it be possible that the lag you experienced was due to trying to run the entire jsfiddle web app on a mobile Chrome browser? Given the complexity of the web app and everything happening behind the scenes, in addition to the specific output being tested, it's likely that performance issues could arise. It may prove beneficial to isolate just the output for testing purposes.

I have transferred your code to a codesandbox environment where you can view the output independently in a mobile browser (refer below). This will allow you to determine whether the issue observed is indeed a coding error.

It is worth mentioning that the image of the ball being used is quite large in file size (~200kb) relative to its display size. Therefore, experiencing flickering during loading on the page would not be unusual.

Here is a scaled-down version of the ball image (reduced by 80% and optimized with ) resulting in a final size of approximately 42kb (which could potentially be further reduced):

https://i.sstatic.net/B1yK9.png

---

Your code now available on codesandbox:

https://codesandbox.io/s/animation-test-ok1dp

Check out only the output (best viewed in a mobile browser on your device):

See a screen video (recorded on my iPhone using the Chrome browser):

https://i.sstatic.net/vFPbd.gif

I find myself in a similar predicament. The webpage functions seamlessly on other browsers, but on Chrome mobile, it operates with noticeable lag. This issue arose after updating my iPhone to iOS 14.

A simplified example experiencing choppy performance on IOS Google Chrome, while Safari runs smoothly and without any issues.

Hopefully this information can assist in identifying the problem and documenting the discrepancies.

<div class="menu__icon icon-menu">
  <span></span>
  <span></span>
  <span></span>
</div>

.icon-menu {
    cursor: pointer;
    display: block;
    height: 18px;
    position: absolute;
    left: 28px;
    top: 52px;
    width: 28px;
    z-index: 5;
}

.icon-menu span {
    will-change: transform;
    background-color: #018d8d;
    height: 2px;
    left: 0;
    position: absolute;
    top: calc(50% - 1px);
    -webkit-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
    width: 100%;
}

.icon-menu span:first-child {
    top: -8px;
}

.icon-menu span:nth-child(2) {
    top: 0;
}

.icon-menu span:last-child {
    top: 8px;
}

.icon-menu._active span:first-child {
    top: -1px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.icon-menu._active span {
    -webkit-transform: scale(0);
    transform: scale(0);
}

.icon-menu._active span:last-child {
    top: -1px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

const element = document.querySelector('.menu__icon');

element.addEventListener('click', () => {
  console.log('clicked');
  element.classList.toggle('_active');
});

https://codepen.io/dblue71/pen/dyzMWmO

After encountering the same issue, I decided to do some research and found useful resources to identify this bug as an iOS Chrome bug. I hope that sharing these resources will assist others who face this bug in the future.

The discussion regarding this bug started back in 2018 on chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=899130

There is also a more recent and active thread available:

https://bugs.chromium.org/p/chromium/issues/detail?id=1231712

Additionally, you may find a helpful post on css-trick related to this issue:

https://css-tricks.com/forums/topic/problem-with-transition-of-transform-property-in-chrome-on-ios/