3 Replies Latest reply on Mar 15, 2016 6:36 PM by banksy55

    CSS Transforms on iPhone 4

    banksy55

      I have some CSS transforms that look like this:

       

      div.growableContainer{

        width: 80px;

        position: absolute;

        left: 50%;

        margin-left: -40px;

        top: 0px;

        -webkit-transition: transform 2s;

        transition: transform 2s;

      }

       

      div.grown{

        transform: scale3d(30, 30, 1);

        -webkit-transform: scale3d(30, 30, 1);

        z-index: 13;

      }

       

      This work great in most places.

       

      However testing on an iPhone 4 (ios 7.1.2) it works fine in Chrome, but when I build in Phonegap the transition doesn't work in the app.  It just jumps straight to the scaled version and doesn't transition it.

       

      I had an uglier version previously that didn't use scale3d, but changed sizes instead.  It worked everywhere, but scale3d is smoother (obviously aside from on iPhone 4 where it doesn't work).

       

      Any ideas?