プレースホルダー div 要素 (縮小および拡大) を使用する小さな無限カルーセルを設計しました。その後、ボタンのクリックで片側にスクロールするいくつかの画像が続きます。その後、画面外に移動する要素はキューの後ろに移動しますまた。コンテナーの div 要素内。
Chrome と Firefox では完全に動作しますが、Mavericks OS X の Safari 7.0 では遷移が非常に遅く/ジャギーです。これを修正するために文書化されたハックをいくつか試しましたが、改善が見られません。
誰かが下のCSSを見て、ハックが正しい要素に配置されているかどうか教えてください。
#ContentGallery {
background-color: black;
z-index:1;
height: 600px;
position: absolute;
width: 2600px;
top: 0;
left: 0;
overflow: hidden;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-webkit-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-perspective: 1000;
}
.flipPagePhoto {
display: inline-block;
-webkit-transition: margin-left 0.75s ease-out;
-moz-transition: margin-left 0.75s ease-out;
-o-transition: margin-left 0.75s ease-out;
transition: margin-left 0.75s ease-out;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-webkit-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
}
.flipPagePlacehold {
float: left;
margin-left: -100px;
width:300px;
height: 600px;
-webkit-transition: margin-left 0.86s ease-out;
-moz-transition: margin-left 0.86s ease-out;
-o-transition: margin-left 0.86s ease-out;
transition: margin-left 0.86s ease-out;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-webkit-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
}
<div id="ContentGallery">
<div class="flipPagePlacehold static"></div>
<img class="flipPagePhoto">
<!-- More images follow -->
</div>