animate.css not animating child images

Question

I have an issue where if I use $animate to add an animate.css infinite animation class to the parent div, here:

<div class="image-wrapper" ng-style="containerStyles">
  <div class="image-helper">
    <img ng-style="imageStyles" ng-src="{{content}}" />
  </div>
</div>

The .image-wrapper div will animate but the image it contains will remain in place until I click the browser or change any CSS value in the inspector. Then the image snaps to where it should be animating and continues animating.

Here are the CSS styles that are also added:

.image-wrapper {
  position: absolute;
  overflow: hidden;
  display: inline-block;
  .image-helper {
    position: relative;
    height: 100%;
    margin: auto;
    img {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
    }
  }
}

This also happens if I use events instead of $animate.

Has anyone experienced something similar? Does anyone know a workaraound?

Rorschach120 Rorschach120 · Accepted Answer · 2015-08-14T15:58:50

Applying transform-style: preserve-3d; to the parent element fixed this issue. It was not related to $animate.

animate.css not animating child images

1 Answers