JQuery UI `Slide` Transition Issues With CSS `transform

Question

When executing JQueryUI's slide transition on an element with a CSS transform the top half of the element is being hidden during the animation. Is there some way I can adjust my JQueryUI animation and/or CSS to prevent this from happening?

JSFiddle : I've created a JSFiddle with the appropriate code - http://jsfiddle.net/9dTkL/4/

To accomplish the vertical centering, I do the following:

<style>
#banner-welcome {
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}
</style>

The top and transform within the CSS allow the banner to fall into the center.

To perform the animation, I execute the following:

$('#banner-welcome').toggle(
  'slide',
  function()
  {
    document.location.href = "#/" + destination;
  }
);

When the animation starts the top half of the #welcome-banner disappears, and the bottom half animates. I've removed the transform from the CSS and everything works great -- except that my banner is no longer centered.

I am performing the vertical centering this way due to a combination of AngularJS and ng-views . I had previously used JavaScript to center the element, but adding the logic to the $(window).resize() event caused problems in other ng-views . I needed a way to isolate this to the specific ng-view .

Is there something I can adjust with my animation or CSS that would not cause the top half of the banner to disappear?

Answer 1

toggle is removed as of 1.9: http://api.jquery.com/toggle-event/

so please use animate or slideDown or slideUp method

also the transform property doesn't need prefixes

#banner-welcome {
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    width: 100%;
    top: 50%;

    transform: translateY(-50%);
}

have you tried adding transform-origin property

#banner-welcome {
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    width: 100%;
    top: 50%;

    transform-origin: 50% 50% 0;
    transform: translateY(-50%);
}

im not seeing the top part disappear in latest Firefox 24