iOS版chromeでCSSのtransitionが動作しない

実現したいこと

CSS transitionでtransformやopacityのアニメーションをつけたい。

発生している問題

以下の状況で、transitionが動作せず、一瞬でアニメーション後の位置に移動したり、opacityが1になったりすることがあります(うまく動作することもあります、どのようなケースなら問題なく動作するかはまだ分かっていないです)。

実機: iPhone 8 (iOS13.3.1)
ブラウザ: ios版Chrome(バージョン: 80.0.3987.95)

※その他のブラウザ(safari,firefoxなど)や、デスクトップ版では上記の問題は起こっていません。また、CSS animationに関しては、chromeでも問題なく動作しています。

※同様に詰んでいる事例として、例えば以下のstack overflowの投稿がありました。
https://stackoverflow.com/questions/49384466/css-transition-not-working-in-mobile-chrome

該当のソースコード

一例として、以下のコードだと、一瞬赤い要素がちらついて見えるのみで、アニメーションにはなりません。

html
1<div id="test"></div>

css
1#test{
2    width: 100px;
3    height: 100px;
4    background-color: red;
5    transition: 2s opacity ease;
6    opacity: 0;
7}
8#test.animated{
9    opacity: 1;
10}

なお、jQueryを使ってclassを付与しています。

javascript
1$(()=>{
2    $("#test").addClass("animated");
3});

試したこと

検索結果をもとにいくつかの対策を行いましたが、どれも機能しませんでした。

translate3dを設定する

　GPUによるレンダリングを可能にするためにtranslate3d(0,0,0)を追加しましたが、動作しませんでした。
参考: https://www.webopixel.net/javascript/454.html

will-change: transformを設定する

　ブラウザのレンダリング方法を調整できるwill-changeプロパティなるものがあるらしいですが、これをいじっても動作しませんでした。
参考: https://postd.cc/css-will-change-property/

transition-delayにsをつける

　transition-delayは使っていなかったのですが、sの単位が抜けていると動かないという記事を発見したので、意図的に0sをつけて宣言しましたが、動作しませんでした。

transition: 1s all ease 0s;

参考：https://www.yutaliberty.com/2019/05/21/prog/2105/

ベンダープレフィックスをつける

stack overflowでの同様の投稿では、

-webkit-transition: 1s -webkit-transform ease;
```　
のようにプロパティだけでなく値にもプレフィックスをつければよいとのことだったのですが、これも動作しませんでした。
参考：[https://stackoverflow.com/questions/30128587/ios-safari-transition-transform-not-working/30403110](https://stackoverflow.com/questions/30128587/ios-safari-transition-transform-not-working/30403110)