PhoneGap/Cordova を使用して Web アプリケーションを構築しており、うまく機能しています。
アプリは一連のスライドで構成されており、ユーザーはスワイプして次のスライドに移動できます。これを達成するためにidangero swiperを使用しています。
より多くのスライドを含むようにアプリをスケーリングしようとすると、XCODE でメモリ警告が表示されてアプリがクラッシュします。CSS3 のハードウェア アクセラレーション (以下) に絞り込みました。クラッシュせずに持つことができるスライドの最大数は 22 です。23 番目を追加すると、メモリ警告が表示されてクラッシュします。
さらに絞ってみました
.swiper-slide {
background-color: #fff;
-webkit-transform-style: preserve-3d;
-webkit-transform: translate3d(0,0,0);
}
以下の CSS から 2 つの webkit-transforms を削除すると、アプリがコンパイルされて実行されますが、最初のページで白い画面が点滅し、slideToggle のような単純なドロップダウン アニメーションがぎくしゃくします。
イダンジェロCSS
.swiper-container {
margin:0 auto;
position:relative;
overflow:hidden;
height: 768px;
width: 1024px;
z-index:1;
}
.swiper-slide {
background-color: #fff;
-webkit-transform-style: preserve-3d;
-webkit-transform: translate3d(0,0,0);
}
.swiper-wrapper {
position:absolute;
width: 100%;
-webkit-transition-property:-webkit-transform, left, top;
-webkit-transition-duration:0s;
-webkit-transition-timing-function:ease;
-moz-transition-property:-moz-transform, left, top;
-moz-transition-duration:0s;
-moz-transform:translate3d(0px,0,0);
-moz-transition-timing-function:ease;
-o-transition-property:-o-transform, left, top;
-o-transition-duration:0s;
-o-transform:translate3d(0px,0,0);
-o-transition-timing-function:ease;
-o-transform:translate(0px,0px);
-ms-transition-property:-ms-transform, left, top;
-ms-transition-duration:0s;
-ms-transform:translate3d(0px,0,0);
-ms-transition-timing-function:ease;
transition-property:transform, left, top;
transition-duration:0s;
transform:translate3d(0px,0,0);
transition-timing-function:ease;
transform: translate3d(0%,0,0) scale3d(1,1,1);
-o-transform: translate3d(0%,0,0) scale3d(1,1,1);
-ms-transform: translate3d(0%,0,0) scale3d(1,1,1);
-moz-transform: translate3d(0%,0,0) scale3d(1,1,1);
-webkit-transform: translate3d(0%,0,0) scale3d(1,1,1);
overflow: hidden;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
}
.swiper-free-mode > .swiper-wrapper {
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
margin: 0 auto;
}
.swiper-slide {
float: left;
}
/* IE10 Windows Phone 8 Fixes */
.swiper-wp8-horizontal {
-ms-touch-action: pan-y;
}
.swiper-wp8-vertical {
-ms-touch-action: pan-x;
}
2 つの「スライド」の HTML の例
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- Home (Page 1) = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = -->
<div id="home" class="swiper-slide" rel="bkg-home.jpg">
<div class="page">
<h1>TEXt HErE</h1>
<h3>Header 3</h3>
</div><!-- /page -->
</div><!-- /home -->
<!-- Page 2 = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = -->
<div id="p2" class="swiper-slide" rel="bkg-2.jpg">
<div class="page">
<div class="menu-trigger"></div>
<h1 style="padding-top:17px;">MORE TITLES</h1>
<div class="content">
<div id="table-of-contents">
<ul>
<li><a href="#p3">Issue Overview </a></li>
<li><a href="#p4">Content1</a></li>
<li><a href="#p6">Content2</a></li>
<li><a href="#p30">Content3</a></li>
<li><a href="#p17">Content4</a></li>
</ul>
</ul>
</div><!-- /table-of-contents -->
</div><!-- /content -->
<div class="header"></div><!-- /header -->
<div class="footer"></div><!-- /footer -->
<div class="footer-segment"></div><!-- /footer-segment -->
</div><!-- /page -->
</div><!-- /p2 -->
</div>
</div>
そのため、アプリをスムーズに実行するには CSS3 を高速化するハードウェアが必要なようですが、クラッシュの原因にもなっているようです。アプリがスムーズに動作するようにするが、アプリ全体がクラッシュしないようにする回避策のコードを持っている人はいますか?