Saturday, May 22, 2010

CSS3 Scaling vs. Changing the width and height of

Again for that PhoneGap iPad app I was previously working on the last CSS3 trick I used seemed to work well, however another CSS3 trick I used scale() failed miserably!
$("img").css({webkitTransform: 'scale(2)'}); // this actually makes thing bigger

Combined with the transition above it actually looked pretty, however.......When trying to pan the image around I kept having problems. The problems weren't while moving the image. That was fine it was when I stopped and started again it would jerk pretty far in the opposite direction. I still don't know this would happen, so I went back to a non CSS3 zoom and it seems fine. More investigation is needed to understand why working with a scaled image was so much more difficult than working with a resized image. Final solution (it even uses the CSS3 transition above):
$("img").each(function() {
$(this).css({height: "auto",width: $(this).width()*2});
});

This may have just been a bug with the jQuery Touch plugin I was using, but I couldn't get it working in the time it needed to work, so I had to just move on. Sadness.

iPad I know you can do better!

No comments:

Post a Comment