February 21, 2011

jQuery fadeIn() bug on iPad: element disappears

I'm using jQuery on a new site, and a fadeIn() animation broke, but only on the iPad with iOS 3.2.2. It works fine in every other browser, including the newer iOS (4+) for iPad. To fix the problem, which in my case doesn't affect other browsers, I simply added a callback function that manually sets the width and height of the element:
newSection.fadeIn( 300 , function(){
  newSection.css( { width:320, height:480 } );
I tried other css properties first, but width and height are the magic properties that prevent the element from being hidden. Quick, someone tell Steve Jobs :p