CODEWITHSUNDEEP
javascriptcsssafarigsap
Gabriel
Gabriel

Reputation: 2750

How to fix clipped text over 3D transform image on Safari?

I'm using TweenLite to animate an image in 3d (perspective) and I have text over the image that is not part of the animation. But in Safari (both iOS and OsX) and Chrome (iOS), the part of the image that is "closer" to the user gets over the text.

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 });
});

(I'm using version 1.14.2 of TweenLite and CSSPlugin)

I tried to set a z-index, I tried to use -webkit-transform: translate3d(0,0,0) but nothing has worked so far for Safari. (It's working perfectly in Firefox, Chrome (desktop and Android), Explorer 11...)

Anyone has an idea of how can I fix this problem?

Upvotes: 0

Views: 780

Answers (1)

Jonathan Marzullo
Jonathan Marzullo

Reputation: 7031

You will need to add transformStyle:"preserve-3d" and z:50 to your text div #text:

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

So your code would be this:

$(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 });
    });
});

Working example (test in Chrome or Safari):

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

The reason you have to move your text div on the z-axis is because of the image rotating on the y-axis partial hiding your text.

Upvotes: 1

Related Questions