WEBTODESIGN

iOSでアニメーションがチラつく問題を解決

先日、文字を一文字ずつ順番に表示させるCSSアニメーションを実装しました。 その際、何故かiOSのSafariのみチラつきが。

translateとopacityの重ねがけ

色んなパターンで試してみたところ、translateとopacityの重ねがけがダメな様子でした。 どっちか片方ならいける。でも両方使いたいんじゃー！！！！！

テキストのみ場合

opacityやめてcolorにした

opacityを0から1ではなく、colorをtransparent（透明）から#000（色付き）にすることにしました。

見た目は同じで、大成功！！

画像の時も同じことになったらこれは使えないけど…。 文字の場合は透明色の活用でなんとかなりそうです。

画像が含まれる場合

残念ながら、画像にはcolorを使う方法は使えません…。 「wrapperしたらいけた」という情報を見かけたので試してみたら、成功しました！

階層を分ける

内側をdivで囲み、translateとopacityをかける階層を分ければ大丈夫でした。
例えば、以下のような感じ。

<div class="outer">
    <div class="inner"></div>
</div>
.outer{
    opacity: 0;
    transition: opacity .5s;
}
.inner{
    transform: translate3d(-50px,0,0);
    transition: transform .5s;
}

ちょっと面倒ですが綺麗にアニメーションされるようになりました。

RECOMMENDATION

NEWEST