Как исправить обрезанный текст поверх трехмерного изображения в Safari?

Question

Я использую TweenLite для анимации изображения в 3D (перспектива), и у меня есть текст поверх изображения, которое не является частью анимации. Но в Safari (iOS и OsX) и Chrome (iOS) часть изображения, которая "ближе" к пользователю, попадает в текст.

jsFiddle: http://jsfiddle.net/k1afbe3k/6/

HTML:

<div id="container">
    <div id="cover">
        <img src="http://i.imgur.com/lKBKKyj.jpg" alt="test" />
    </div>
    <div id="text">
        <h1>This is some text</h1>
    </div>
</div>
<div id="btn">Animate</div>

CSS:

#container { height: 200px; position: relative; width: 200px; }
#cover { height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1; }
#cover img { display:block; height: 100%; width: 100%; }
#text { height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 10; -webkit-transform: translate3d(0,0,0); }
#text h1 { color: #fff; text-align: center; }

JavaScript:

TweenLite.set($('#container'), {perspective:1800});
$('#btn').on('click', function(){
    TweenLite.to($('#cover'), 0.4, { rotationY: -15 });
});

(Я использую версию 1.14.2 TweenLite и CSSPlugin)

Я пытался установить z-index, я пытался использовать -webkit-transform: translate3d(0,0,0), но пока ничего не получалось для Safari. (Он отлично работает в Firefox, Chrome (для настольных ПК и Android), Explorer 11...)

Кто-нибудь имеет представление о том, как я могу решить эту проблему?

Answer 1

Вам нужно будет добавить transformStyle:"preserve-3d" а также z:50 к вашему тексту div #text:

TweenLite.set($('#text'), {transformStyle:"preserve-3d",z:50});

Итак, ваш код будет таким:

$(document).ready(function(){
    TweenLite.set($('#container'), {perspective:1800});
    // add the below
    TweenLite.set($('#text'), {transformStyle:"preserve-3d", z:50});
    $('#btn').on('click', function(){
        TweenLite.to($('#cover'), 0.4, { rotationY: -15 });
    });
});

Рабочий пример (тест в Chrome или Safari):

http://jsfiddle.net/k1afbe3k/16/

Причина, по которой вам нужно переместить текстовый элемент div по оси z, заключается в том, что изображение, вращающееся по оси y, частично скрывает ваш текст.