fix(tabs): 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. Closes #4341.

src/components/tabs/js/tabsController.js

@@ -6,7 +6,7 @@ angular
  * @ngInject
  */
 function MdTabsController ($scope, $element, $window, $mdConstant, $mdTabInkRipple,
- $mdUtil, $animate, $attrs, $compile, $mdTheming) {
+ $mdUtil, $animateCss, $attrs, $compile, $mdTheming) {
  // define private properties
  var ctrl = this,
  locked = false,
@@ -635,17 +635,41 @@ 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 fromHeight = { height: currentHeight + 'px'},
+ toHeight = { 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(fromHeight);
+
+ // Animate the height from the old to the new
+ $animateCss($element, {
+ from: fromHeight,
+ to: toHeight,
+ easing: 'cubic-bezier(0.35, 0, 0.25, 1)',
+ duration: 0.5
+ }).start().done(function () {
+ // Then (to fix the same iOS issue as above), disable transitions and remove the specific
+ // pixel height so the height can size with browser width/content changes, etc.
+ $element.css({
+ transition: 'none',
+ 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;
+ });
  }
 
  /**

src/components/tabs/tabs.scss

@@ -31,9 +31,6 @@ md-tabs {
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
- &.ng-animate {
- transition: height $swift-ease-in-out-duration $swift-ease-in-out-timing-function;
- }
  &:not(.md-no-tab-content):not(.md-dynamic-height) {
  min-height: 200 + $tabs-header-height;
  }