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..

    How to create a fluidic list using css

    How can I center a logo and place the links left and right on the navbar using bootstrap?

    How to set a CSS property with a variable in JQuery?

    How to load specific set css commands only at the first browsing of the web site?

    How to know where a CSS error occurred in dynamic content or how to stop the script upon CSS error

    I made a webpage but have excess white space at the bottom, how do I get rid of this?

    How to switch between multiple CSS animations?

    How do you set a css class attribute with Javascript? [duplicate]

    CSS: How to move text link to the right inside li

    How to keep curved borders using css 3

    how to create table grid view fix header with long title name using only CSS?

    How to make a scrolling website mobile friendly?

    How to strike through obliquely with css showing the text on top of the strike through

    How to add a media attribute to the CSS LINK html tag for the ASP.NET WebResource.axd Http Handler

    How to style the div to triangle using CSS? [duplicate]

    Using pure Javascript to show contents of list on click only on mobile and show initially on desktop

    Navbar on left of page, how to let content resize to match screen size?

    W3.CSS how to get a standard header-[left-right]footer layout?

    CSS: How to get thumbnails into a horizontal line?

    How to align HTML horizontaly using CSS

    how to create inline style with :before and :after

    How to change the active color of the tabs title background using css

    In css how to display multiple divs?

    How to change the color of a div in css when another one is on focus

    How to style my HTML form using CSS

    How to align css class using bootstrap

    how to make RegEx to match CSS non greedy for a part of the match

    How to create rolldown content with css?

    How to customize the EditorFor CSS with razor

    CSS Layout. Can not get idea how to fix it