使用Angular 1.3.15在Safari / Moz中进行ngShow动画闪烁

Question

我正在开发一个Angular 1.3.15应用程序，该应用程序的面板从右向左滑入。动画适用于所有浏览器，但在Safari和Mozilla上，面板在屏幕上闪烁，然后动画参与其中。这是一个快速的毫秒显示面板（看似正确的动画）然后正确的动画参与和面板滑入。在Safari上，一些ng-show事件有闪烁而一些没有 - 这些在刷新时永远不会相同。 Moz是所有ng-show事件的一致闪烁。下面是我正在使用的CSS。提前谢谢。

    /* Show */
    &.ng-hide-remove.ng-hide-remove-active {

    -webkit-animation: 175ms slideInRight; 
    animation: 175ms slideInRight; 
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-transition-timing-function: cubic-bezier(0.865, 0.395, 0.750, 1); /* older webkit */
    -webkit-transition-timing-function: cubic-bezier(0.865, 0.395, 0.750, 1.205); 
    -moz-transition-timing-function: cubic-bezier(0.865, 0.395, 0.750, 1.205); 
    -o-transition-timing-function: cubic-bezier(0.865, 0.395, 0.750, 1.205); 
    transition-timing-function: cubic-bezier(0.865, 0.395, 0.750, 1.205);     /* custom */  

    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    perspective: 1000;    
    visibility: hidden !important;
    z-index: 1;

  }

  /* Hide */
  &.ng-hide-add.ng-hide-add-active {
    -webkit-animation: 175ms slideOutRight; 
    animation: 175ms slideOutRight; 

    -webkit-transition-timing-function: cubic-bezier(0.865, 0.395, 0.750, 1); /* older webkit */
    -webkit-transition-timing-function: cubic-bezier(0.865, 0.395, 0.750, 1.205); 
    -moz-transition-timing-function: cubic-bezier(0.865, 0.395, 0.750, 1.205); 
    -o-transition-timing-function: cubic-bezier(0.865, 0.395, 0.750, 1.205); 
    transition-timing-function: cubic-bezier(0.865, 0.395, 0.750, 1.205); /* custom */ 
    visibility: visible !important;

    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    perspective: 1000;
  }

/* ********************************************
SLIDE IN LEFT TO RIGHT
******************************************** */
@-webkit-keyframes slideInRight {
  0% {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInRight {
  0% {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}