CODEWITHSUNDEEP
cssiosmobilesafari
studioromeo
studioromeo

Reputation: 1548

iOS hardware accelerated slide down

Got a good question for you guys today. I'm working on a drop down slider for mobile devices (specifically iOS mobile safari). I've got quite far with it but hit a brick wall. The problem I've experienced is (height/position/margin) transitions aren't very smooth on a mobile device. So I've switched over to using transforms as they are buttery smooth on the mobile.

I use a container with a child article. The article is translated -120% on the y axis so it is hidden by the containers hidden overflow. Upon tap the article is returned to its original position.

This works great apart form one thing, the container does not collapse when the article is transformed -120% causing whitespace between my drop down sliders :(

My question is then, how can i work around this?

Hope you guys can help!

Upvotes: 2

Views: 1493

Answers (1)

blend
blend

Reputation: 650

Use translate3d to trigger hardware acceleration:

-webkit-transform: translate3d(0,-200%,0);
-webkit-transform: translate3d(0,0,0);

This is a well-known trick for forcing iOS devices into using hardware accelerated CSS3 transforms. I've updated your fiddle for you (note: I binded to the 'hover' event for desktop browser testing).

http://jsfiddle.net/CeyJq/4/

Upvotes: 1

Related Questions