fix(mdTabs): Fix 0-height animation on iOS devices.

On iOS devices, when switching between tabs, the height would jump
to 0, then animate to the proper place causing a bad glitch.

Fixes #4339

src/components/tabs/js/tabsController.js

@@ -635,17 +635,36 @@ function MdTabsController ($scope, $element, $window, $mdConstant, $mdTabInkRipp
         newHeight     = contentHeight + tabsHeight,
         currentHeight = $element.prop('clientHeight');
     if (currentHeight === newHeight) return;
+
+    // Lock during animation so the user can't change tabs
     locked = true;
-    $animate
-        .animate(
-        $element,
-        { height: currentHeight + 'px' },
-        { height: newHeight + 'px' }
-    )
-        .then(function () {
-                $element.css('height', '');
-                locked = false;
-              });
+
+    var oldCssHeight = { height: currentHeight + 'px'},
+        newCssHeight = { height: newHeight + 'px' };
+
+    // Set the height to the current, specific pixel height to fix a bug on iOS where the height
+    // first animates to 0, then back to the proper height causing a visual glitch
+    $element.css(oldCssHeight);
+
+    // Animate the height from the old to the new
+    $animate.animate($element, oldCssHeight, newCssHeight).then(function () {
+      // Then (to fix the same iOS issue as above), disable transitions
+      $element.css('transition', 'none');
+
+      // And remove the specific pixel height so the height can size with browser width/content
+      // changes, etc.
+      $element.css('height', '');
+
+      // In the next tick, re-allow transitions (if we do it all at once, $element.css is "smart"
+      // enough to batch it for us instead of doing it immediately, which undoes the original
+      // transition: none)
+      $mdUtil.nextTick(function() {
+        $element.css('transition', '');
+      });
+
+      // And unlock so tab changes can occur
+      locked = false;
+    });
   }
 
   /**