モバイルキーボードが表示されているときにtransform3dが画面に表示されない場合

Question

これは奇妙な方法ですが、私はコードバスアプリを作成しており、この方法ですべてのプラットフォームで一貫性を持たせることができます。

私はキーボードなどのテクスチャが含まれているボックスを上にスライドしようとしているが、最大スライドさ：

var windowHeight = window.innerHeight; 
var keyHeight = e.keyboardHeight; 
var topBarHeight = (windowHeight * .11); //All my top bars are 11vh 
var transformHeight = Math.floor((keyHeight/windowHeight) * 100); 
textContainer.style.transform = "translate3d(0, -" + transformHeight + "vh , 0)"; 
textContainer.style.transition = "transform 2s ease-out"; 

はこれにする必要があり、正確にそれを入れているが、何らかの理由でアニメーションが非常にあります途中で不安定です。キーボードが外されたとき（同じ場所に戻すため）、そして途中でスムーズにスムーズになると、私はほとんど同じことをします。

私はCSSアニメーションを作成し、最後にtransform3dを設定することを考えましたが、何か修正するかどうかはわかりません。何かご意見は？ありがとう！

Answer 1

私はこれに対処するために、すべてを関数内に置き、window.setTimeoutコールを呼び出して、0にタイマーを設定しました。それはすべてかなりよく説明されているhere。