Choppy opacity keyframe animation in iOS Chrome - html

Question

I am attempting to animate an opacity fade in effect when a button is pressed. It looks great in just about every browser including Safari on iOS. The intended behavior looks like the following:
However, when viewed in Chrome on iOS it struggles and seems to be delayed and choppy. Here is a video of what is happening:
I've tried the usual tricks, such as applying the backface-visibility and perspective properties but neither seems to do the trick. I've also explored other options such as animating on height, but in my application the height of the content isn't known until the tab is pressed, making that a tricky alternative.
Thanks for reading. I appreciate any suggestions!
const tab1Button = document.querySelector('.tab-1-button');
const tab2Button = document.querySelector('.tab-2-button');
const tab1 = document.querySelector('.tab-1');
const tab2 = document.querySelector('.tab-2');
tab1Button.addEventListener('click', () => {
tab1.classList.remove('hidden');
tab1.classList.add('fadein');
tab2.classList.remove('fadein');
tab2.classList.add('hidden')
})
tab2Button.addEventListener('click', () => {
tab2.classList.remove('hidden')
tab2.classList.add('fadein');
tab1.classList.remove('fadein');
tab1.classList.add('hidden')
})
#keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fadein {
display: block;
animation: fadeIn 1s 0s;
will-change: opacity;
}
.hidden {
display: none;
}
<ul>
<li>
<button class="tab-1-button">Tab 1</button>
</li>
<li>
<button class="tab-2-button">Tab 2</button>
</li>
</ul>
<div class="tab-1 fadein">
Donec a ornare erat, ut feugiat odio. Morbi ultricies pulvinar gravida. Suspendisse posuere mi odio, a dignissim urna condimentum at. Duis mauris neque, fringilla ut suscipit vitae, aliquet vitae orci. Curabitur turpis lectus, facilisis non ipsum eget, ullamcorper consequat sem. Praesent dui tellus, vulputate eu varius ut, vehicula sed augue. Donec nec leo vel magna vulputate sagittis. Sed non varius justo, a tristique nulla. Morbi nunc nisl, interdum luctus ante a, gravida auctor quam. Fusce erat justo, euismod quis metus a, dictum pulvinar odio. Pellentesque convallis purus quis dui fermentum feugiat. Vestibulum quis rutrum enim. In tempor dui quam, vitae posuere sem imperdiet quis. Duis a libero massa. Donec massa purus, faucibus eleifend tellus vel, pharetra viverra diam. Pellentesque cursus laoreet odio rutrum ullamcorper.
</div>
<div class="tab-2 hidden">
Nunc ullamcorper ornare tempus. Phasellus gravida diam mauris, non malesuada eros fringilla sit amet. Cras a ornare quam. Mauris ut condimentum ipsum. Proin tristique nisl in purus pretium, et dictum tortor semper. Sed aliquam condimentum mauris, vitae iaculis est iaculis ut. Donec auctor magna at eros egestas tristique. In elit tellus, luctus eget nulla at, consequat porta nisl. Suspendisse potenti. Nam at fringilla risus. In semper tristique semper. Nunc dignissim felis nisi, ac semper turpis dignissim in.
</div>