CODEWITHSUNDEEP
cssfirefoxtransformcss-transitions
user1861373
user1861373

Reputation: 85

CSS scale transition issue on Firefox

I am working on a CSS scale transition and I've found some issues on Firefox (Mac). In short I have 2 divs, the former scales down and fades out:

@-webkit-keyframes scaleDownTo {
  to { opacity: 0; -webkit-transform: scale(.8); }
}
@-moz-keyframes scaleDownTo {
  to { opacity: 0; -moz-transform: scale(.8); }
}
@keyframes scaleDownTo {
  to { opacity: 0; transform: scale(.8); }
}

The latter scales down and fades in:

@-webkit-keyframes scaleDownFrom {
  from { opacity: 0; -webkit-transform: scale(1.5); }
}
@-moz-keyframes scaleDownFrom {
  from { opacity: 0; -moz-transform: scale(1.5); }
}
@keyframes scaleDownFrom {
  from { opacity: 0; transform: scale(1.5); }
}

The issue is on the appearing div: during the transition, when it comes out, the size does not cover the parent div and its position is anchored at the top left corner. When the transition ends up, the div suddenly gets its original size and position.

Note: I've found this snippet on a Codrops tutorial and I've noticed that it also happens on their demo (view example -> choose the transition called SCALE DOWN / SCALE DOWN), so I was wondering if it's just a FF bug or there's a fix for that. Maybe someone can test it on PC+FF and let me know if it does work or not.

Thanks a lot!

UPDATE: Here is a fiddle that I've created. As you can see, the issue happens on Firefox when the container width is > than the image size.

Upvotes: 3

Views: 1923

Answers (1)

Morgan Feeney
Morgan Feeney

Reputation: 897

There is more to this than you have demonstrated.

I have recreated (based upon what you have supplied) a carousel using Owl Slider. Firstly this Slider has a few issues which are inherent such as support in IE for transitions - they are not supported in IE - people be warned.

Secondly when I use animation-delay: in Firefox it breaks the animation, if it is not present the animation works; albeit without the delay - which in this case I can live with. I would say that this is your issue, as it resets the image as you describe and the animation continues after that point.

In your fiddle you have not supplied all the required files, therefore it doesn't even move through all the slides so the whole thing had to be re-created to have an insight into how it works.

Please see my demo for clarification > http://codepen.io/mofeenster/pen/smwAD

Upvotes: 0

Related Questions