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

    CSS Transforms on iPhone 4

    banksy55 Level 1

      I have some CSS transforms that look like this:



        width: 80px;

        position: absolute;

        left: 50%;

        margin-left: -40px;

        top: 0px;

        -webkit-transition: transform 2s;

        transition: transform 2s;




        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?