translate3d () вызывает отсечение в сафари

Question

У меня есть веб-приложение, которое я разработан, это сильно зависит от абсолютного позиционирования, преобразования CSS и CSS-переходов.

Моя разметка:

<div class="wrapper">
    <div class="background" ></div>
    <div class="foreground" >
        <div class="image" ></div>
    </div>
</div>​

.

Мои CSS

.wrapper{
    -webkit-perspective: 1600;
    -webkit-perspective-origin-y: 30%;
    height: 500px;
    width: 100%;
}

.background{
    position: absolute;
    background-size: 100% 100%;
    background-image: url("http://farm9.staticflickr.com/8321/8038059897_403c567211.jpg");
    background-color: transparent;
    position: absolute;
    width: 100%;
    height: 300px;
    bottom: 0;
    pointer-events: none;
    -webkit-transform:translate3d(0px,0px,0px);
}

.foreground{
    position: absolute;
    top: 5%;
    bottom: 5%;
    left: 5%;
    right: 5%;
    -webkit-transform: rotateY(25deg);
}

.foreground .image{
    background-image: url("http://farm7.staticflickr.com/6139/6198476123_754eaa1920_m.jpg");
    position: absolute;
    background-size: 100% 100%;
    min-width: 100%;
    min-height: 100%;
    -webkit-transform:translate3d(0px,10px,0px);
}

.

Вы можете увидеть его в действии на http://jsfiddle.net/kjg3f/24/

Если вы посмотрите на пример в Safari (как на рабочем столе, так и в iOS), вы увидите, что изображение переднего плана окраивается на заднем плане.В хроме, однако, кажется, работает правильно.

Удаление Translate3D () с фона, кажется, вызывает рендеринг для работы, но я требую, чтобы транслироваться3D () быть там для целей анимации.

Преимущественное спасибо за помощь.

Answer 1

Я бы рассмотрел эту ошибку в Chrome, и действительно, есть два вопроса, открытые в отношении его (http://code.google.com/p/chromium/issues/detail?id=116710 и http://code.google.com/p/chromium/issues/detail?id=102673 ).Firefox проявляет то же поведение.

Сафари способ сделать это имеет смысл ... Когда вы поворачиваете изображение переднего плана в трехмерном пространстве, он должен клип через изображение позади него, как они на одном самолете.Если вы измените значение Translate3D Z на передний план или элементы фона, вы можете перемещать их вперед или назад, чтобы они не пересекались.

Поддержка кросс-браузера для 3D-трансформаций, к сожалению, все еще довольно слабая, удачи!