読み書きプログラミング

日常のプログラミングで気づいたことを綴っています

Mobile SafariでスムーズなBootstrap モーダル

Bootstrap便利ですね。
でも、iPhone, iPadで使うとエフェクトのアニメーションがぎこちなくて重いアプリのように見えます。

少し手を入れればスムーズになります。
bootstrap.cssの以下の部分を下のように直せばOK。

.modal.fade {
  -webkit-transition: opacity .3s linear, top .3s ease-out;
  -moz-transition: opacity .3s linear,top .3s ease-out;
  -o-transition: opacity .3s linear, top .3s ease-out;
  transition: opacity .3s linear, top .3s ease-out;
  top: -25%;
}
.modal.fade.in {
  top: 10%
}
.modal.fade {
  -webkit-transition: opacity .3s linear, -webkit-transform .3s ease-out;
  -moz-transition: opacity .3s linear, -moz-transform .3s ease-out;
  -o-transition: opacity .3s linear, -o-transform .3s ease-out;
  transition: opacity .3s linear, transform .3s ease-out;
  top: 10%;
  -webkit-transform: translateY(-25%);
  -moz-transform: translateY(-25%);
  -o-transform: translateY(-25%);
  transform: translateY(0%);
}
.modal.fade.in {
  -webkit-transform: translateY(0%);
  -moz-transform: translateY(0%);
  transform: translateY(0%);
}

(WebKit以外動作未確認です。すいません。)
iOS5からiOS6への移行時にCSSのハードウェアアクセラレーションの変更が話題になりました。それとどう関係するのかよくわかりませんが、とりあえずtranslateYを使ってtopのアニメーションよりスムーズにはなりました。