0

I'm currently in the process of building a new mobile responsive site for my company that uses a number of CSS3 transitions on scroll to make images pop into focus. The effect is very striking and works great on modern browsers as well as my Google Nexus devices.

The problem I have is that the animations themselves are really slow on Apple Devices. I've tried them on a 1st Generation Ipad and an IPhone 5. On the Nexus you can scroll to the area of the page the animations are on and they will pop in straight away. On Apple devices however you have to wait for several seconds for the animations to trigger.

I have used the following library to achieve these animations:

http://www.justinaguilar.com/animations/scrolling.html

If you browse to this url on an Apple device, you will see what I mean with regards to the animations taking a while to load. After some research online I found that many suggest it could be due to the graphics processor not kicking in on these devices meaning everything is rendered (slowly) using the processor. To get around this it is suggested that the following is added to the animations to ensure the graphics processor kicks in:

 -webkit-transform: translateZ(0);

However, I have already tried this to no avail. After some further research I have found that many suggest to replace translateX or translateY with translate3D but I have not tried this method yet as I do not understand how I would convert the following example:

/*
==============================================
fadeIn
==============================================
*/

.fadeIn{
    animation-name: fadeIn;
    -webkit-animation-name: fadeIn; 
    -webkit-transform: translateZ(0);
    animation-duration: 1.5s;   
    -webkit-animation-duration: 1.5s;

    animation-timing-function: ease-in-out; 
    -webkit-animation-timing-function: ease-in-out;     

    visibility: visible !important; 
}

@keyframes fadeIn {
    0% {
        transform: scale(0);
        opacity: 0.0;       
    }
    60% {
        transform: scale(1.1);  
    }
    80% {
        transform: scale(0.9);
        opacity: 1; 
    }   
    100% {
        transform: scale(1);
        opacity: 1; 
    }       
}

@-webkit-keyframes fadeIn {
    0% {
        -webkit-transform: scale(0);
        opacity: 0.0;       
    }
    60% {
        -webkit-transform: scale(1.1);
    }
    80% {
        -webkit-transform: scale(0.9);
        opacity: 1; 
    }   
    100% {
        -webkit-transform: scale(1);
        opacity: 1; 
    }       
}

My question therefore is twofold:

How would I convert the code above so that it uses the supposedly faster transform3d or scale3d syntax?

Are there any other methods I could use to improve the performance on these (Apple) devices so that they match the performance on more standards compliant devices such as the Nexus range?

Any help would be greatly appreciated.

jezzipin
  • 4,110
  • 14
  • 50
  • 94
  • possible duplicate of [Why does enabling hardware-acceleration in CSS3 slow down performance?](http://stackoverflow.com/questions/10014461/why-does-enabling-hardware-acceleration-in-css3-slow-down-performance) – Paul Sweatte Nov 06 '14 at 19:03
  • How is this a duplicate? It's asking a completely different question – jezzipin Nov 07 '14 at 14:45
  • Seems like JavaScript.jQuery may be the way to go for animation in iOS http://joehewitt.com/2011/10/05/fast-animation-with-ios-webkit I am currently scouring the 'Net to find solutions for my portfolio because the lag and choppiness makes it look/feel dumb. – NetOperator Wibby Feb 28 '15 at 19:07

0 Answers0