html - Safari での奇妙な動作 CSS 3D 変換

Question

2 つの画像が表示された単純な jQuery ページを作成しています。それらのいずれかをクリックすると、CSS3 変換がトリガーされ、画像のズームが終了します。

このページは iPad で表示する必要があるため、ハードウェア アクセラレーションを使用して遷移をスムーズに保つために、CSS3 3D Transformation を使用する必要があります。

ここに簡単なデモ スクリプトを書きました: http://jsfiddle.net/andrearota/KAdmV/4/

たとえば、倍率を使用してズームインする方法は次のとおりです。z プロパティを使用して、閉じた div の上に div を取得しようとしていることに注意してください。

Carousel.prototype.openLeft = function (callback) {
    var that = this;
    if (this.leftStatus != 'open') {
      this.left.transition({
          z: '+=100',
          scale: 2 
        }, function () {
          that.leftStatus = 'open';
          if (callback) callback();
        });
    } else {
        if (callback) callback();
    }
};

ご覧のとおり、左の画像をクリックすると、画像が拡大され、右の画像に重なって表示されます。右のものをクリックすると、その逆になります。ただし、左の画像をもう一度クリックすると、左のズーム画像が最小化された右の画像の下に表示されるため、画像のスタックの問題が発生する可能性があります。

ヒントはありますか？