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


Tags: javascript,css3,safari,tweenlite

Problem :

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?



Solution :

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.


    CSS Howto..

    HTML / CSS: How to make the content follow the footer?

    how to write this code as link click animation

    How to position 3 images in two equal height columns?

    How do I make part of a style element a function? (IE: color:$random instead of color:red)

    How to create a 1px height div in IE8

    How do I make background-size work in IE8?

    How do you explain this div spacing issue?

    How to create a zig zag banner with css

    How to make CSS hover effect persist after clicking Bootstrap button

    How to have one div overlap two other divs?

    Weird css box-sizing in bootstrap 3. How to get rid of horizontal slider

    How to keep the top div height fixed and bottom div height in %age

    What is this HTML notation and how can I use it myself?

    How can I delay the speed of hover purely via CSS3 for a div?

    Javascript: how to append more text to user copied text ala nydailynews.com

    How can I change the shape of a gridview to circular?

    How to avoid css overlapping?

    HTML/CSS How to auto-adjust the width of my container in order to show several images horizontally displayed?

    Modal box doesn't show completely

    How to reset margin-bottom to its default value

    How can I have a 2 column layout with one of the columns with a fixed width and the other with the remaining width?

    How to get 2 CSS files to work together? - Problem with !important overriding rules

    how to load external div into a master.html div from a number of submenu items

    How can I fit images in full height columns in Bootstrap?

    How can I stretch my navigation and content area height to 100% in CSS?

    How to add hanging indent to the labels of a checkbox customized with custom icons in CSS?

    CSS - How to working with multi-level menu by simple

    How to apply this sidebar to all pages using CSS?

    How do I make text-transform:uppercase work properly with Greek?

    How to move text using CSS animation?