【CSS】animationのtransformを指定しているとき、100%後にちらつく不具合の対処法【スマホ】

前書き

PCでは正常に動くのに対し、iPhoneのChromeでタイトルの現象が発生したのでその対処法を書きます。

バグったコード

@keyframes marquee {
    0% { left: 100%; transform: translate(0); }
  100% { left: 0; transform: translate(-100%); }
}

対処法

@keyframes marquee {
    0% { left: 100%; transform: translate(0); color: black; }
   90% { left: 0; transform: translate(-100%); color: black; }
  100% { left: 0; transform: translate(-100%); color: transparent; }
}

100%後のCSSがtranslate(0)で再描画されているっぽいので色を消して対応しました。
多少の間隔（今回だと10%）がないと相変わらずちらつきました。はあ…。

効果がなかったやつ

ググるとでてくる
・perspectiveを指定する
・backface-visibility:hiddenにする
みたいな対処法は全く効果がありませんでした。

チラ裏

特定の端末のためにこういうハックを仕込むの嫌い。