CSS TranslateY Animation On Safari

I want to slide in a fullscreen div from the top using CSS. I am using AngularJS (ionic framework) but attempting to keep this animation pure css. The div won't slide down in Safar

Solution 1:

• Converted to transitions instead of animations.
• Fixed ng-click on anchor tag causing page to post by preventDefault().
• Converted show/hide to toggle.

function GalleryCtrl($scope) {
  $scope.toggleGallery = function($event) {
    angular.element(document.querySelector('#gallery-overlay')).toggleClass('slideDown');
    $event.preventDefault();
    $event.stopPropagation(); /* Not required, but likely good */
  };
}

#gallery-overlay {
  position: absolute;
  top: -100px;
  left: 0;
  right: 0;
  height: 100px;
  background-color: #222;
  transition: all 1s ease;
}
#gallery-overlay.slideDown {
  top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <div ng-controller="GalleryCtrl">
    <div>
      <a href="" ng-click="toggleGallery($event)">Click me to slide panel down</a>
    </div>
    <div id="gallery-overlay" ng-click="toggleGallery($event)"></div>
  </div>
</div>