モバイルWebマルチキャストIOSカートンの問題

夕食前に、bannerが手動で左右に滑るとカートンするとテストされて突っ込まれた.私は科学的ではありません.果物の携帯電話がどうしてカートンするのですか.私はテストの手の中でiPodを持っているのを見て、私はたぶんこの小物の性能が強くないと思って、それからまた5 Sを持ってきて、依然としてカートンができて、面白いのは、2つの5 S、1つのIOS 7 1つのIOS 8、IOS 7はほとんどカートンがなくて、IOS 8はカードができます.
食後にテストからiPodを借りました...この問題の解決に着手する.
私はずっと輪番が何か問題があるべきではないと思っています.私はライブラリSwipeを使っているので、starは5000以上あるので、頼りになるはずです.ついでにこのライブラリをお勧めします.移動端に適しており、注釈付きを圧縮していないのは15 kのみで、無限マルチキャスト、手動左右スライド、構成項目をサポートしています.
△作者の倉庫には物が多くなく、他にはstartがほとんどありません..
使い方も簡単で、GithubのReadMeは十分で、もう一度くどくど言います.
HTML構造:

<div id='slider' class='swipe'>
  <div class='swipe-wrap'>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

CSSスタイル:

.swipe {
  overflow: hidden;
  visibility: hidden;
  position: relative;
}
.swipe-wrap {
  overflow: hidden;
  position: relative;
}
.swipe-wrap > div {
  float:left;
  width:100%;
  position: relative;
}

JavaScriptコード:

window.mySwipe = new Swipe(document.getElementById('slider'), {
  startSlide: 2,
  speed: 400,
  auto: 3000,
  continuous: true,
  disableScroll: false,
  stopPropagation: false,
  callback: function(index, elem) {},
  transitionEnd: function(index, elem) {}
});

 
はい、さっきのカートンを続けて、グーグルもグーグルの毛糸を出していません.やはりGithubに入ってプロジェクトのissueを見なければなりません.もう300以上のissueがあります.IOSで出たカートンである以上、IOSをキーワードにスクリーニングしても、まだたくさんあります.一つ一つ見て、英語バーで見た卵が痛いです.
長い調べ(実は数分....)を経て、これを見つけました.

iOS hardware acceleration trigger fix (CSS) 

Addition of -webkit-perspective and -webkit-backface-visibility on container element in order to trigger hardware acceleration in iOS6. This is a fix since translate3d no longer triggers hardware acceleration in iOS6 Safari.
そして私は試してみる態度でcssに追加しました.

.swipe {
  overflow: hidden;
  visibility: hidden;
  position: relative;
}
.swipe-wrap {
  overflow: hidden;
  position: relative;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; 
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.swipe-wrap > div {
  float:left;
  width:100%;
  position: relative;
}

プラスしてからは、糸が滑ってだめだとしか言いようがありません!!!issueではIOS 6に言及していますが、実はIOS 7、IOS 8にもこの問題があると言いたいです.
 
以前はハードウェアの加速に対する理解が深くなく、translateZ(0)というhackしか知らなかったが、perspectiveとbackface-visibilityも今日知っていた.実はSwipeJSというライブラリにはtranslateメソッドがあります.

style.webkitTransform = 'translate(' + dist + 'px,0)' + 'translateZ(0)';
style.transform = 'translateX(' + dist + 'px)';

古いシステムではtranslateZというhackが使われているが,新しいシステムでは使われていないことがわかり,著者らは新しいシステムがスムーズに動作していると考えているのかもしれない.変更し始めたばかりです.

 style.webkitTransform = 
 style.transform = 'translate(' + dist + 'px,0)' + 'translateZ(0)';

しかし、むやみに使うことはありません.perspectiveとbackface-visibilityが加わったからです.
また、上のissueは12年です!!!さらにティissueの同志はprも作者mergeに取り上げられたが、最新版のCSSコードにはperspectiveとbackface-visibilityの2つの属性は現れず、著者が今の機械が十分にスムーズだと思っているのかもしれない.
 
バグを簡単に修正して、まとめます.
ハードウェアの加速は本当に役に立ち、translateZだけではありません.
オープンソースを使った作品に問題があったら、issueを調べてください.
 
最後に、先ほどお話ししたperspectiveとbackface-visibilityの2つの属性が役に立ちます.transformやtransitionの過程で点滅する現象を見つけたら、ページに彼ら二人を加えて試してみましょう.具体的にはここを見てください.