Fixing CSS Transitions on Mobile

I have a web page I'm working on that uses simple fade in and fade out transitions on the page elements when it loads.

They work fine except I seem to run into a problem on Chrome for iOS. Oddly enough, the problem doesn't reproduce on any other browsers, nor does it occur when testing with say BrowserStack. But seems to only occur when using an actual iPhone or iPad in only Chrome.

What occurs is the text fades in and then the opacity goes back to 0 making it disappear again.

Because it only occurs on the actual devices I'm having a tough time tracking down the source of the issue. Obviously I was able to identify the transitions as the source of the problem but so far I have yet to figure out why it's occurring and only on a single browser on the actual devices. I'm unsure of a way to use dev tools straight on a mobile device, usually I would just emulate it in a VM but as I mentioned the problem doesn't occur there. I also don't have a mac so any solution requiring a direct developer interface isn't possible.

Anyone have any ideas as to why I'm experiencing such behavior or any suggestions as to how I could approach this?

Here's the code for how the transitions are handled, they are quite simple:

jQuery('.fade-up').one('inview', function() {
  jQuery(this).removeClass('no-display');
  jQuery(this).addClass('animated fadeInUp appear');
});

And the transitions themselves:

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}