Elements using CSS transitions do not appear on iPad/iPhone until inspected with Safari web inspector

Question

I'm working on a web page that uses a lot of CSS animations (mostly TranslateY) that are triggered at various scroll positions through JQuery. It works great across Webkit, FF, IE, etc. Unfortunately, on iPhone and iPad, some (but not all) of the elements just don't appear. I'm aware of the differences of 'scrolling' on mobile versus desktop and have confirmed that the class being added to fire the animations is actually getting added.

I plugged the iPad into my desktop and have been using Safari's Mobile Web Inspector to poke around... what's really weird is that I have confirmed that the animations are firing and the divs are moving around, they just aren't visible... UNTIL I add a line of style to the div in the inspector. As soon as I start typing anything, literally even just a blank line, the element appears! This has me totally stumped. I've tried adding a z-index but don't know what else to do.

I'm using Safari 6.1.1, the latest version as of this writing. Also, turning off overflow:hidden; on the parent container has helped, but unfortunately, I need overflow:hidden; for this application.

Any help is appreciated, thanks -

This is how I add the class for the animation:

function getTopHeight() {
    return (document.body.scrollTop) ?
          document.body.scrollTop :
          document.documentElement.scrollTop;
}

$(window).scroll(function() {       

        // Manage animations on scroll on the 'our story' page.
        if (getTopHeight() >= 442){

            $('.tree-1').addClass('popup-animation');
        } ...

And these are some CSS rules I have surrounding that animation:

.tree-1{
    transition: all 0.5s; 
    -webkit-transition: all 0.5s; /* Safari */
    -moz-transition: all 0.5s; /* FF */
}
.popup-animation{
    -ms-transform: translateY(-330px); 
    -webkit-transform: translateY(-330px);
    -moz-transform: translateY(-330px);
}

Answer 1

Following some of the solutions on this somewhat related SO question, I was able to solve my problem by adding:

-webkit-transform-style: preserve-3d;

... to the elements being translated.