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のアニメーションよりスムーズにはなりました。