CSS3 transition (transform) not working in Firefox, but in Chrome and Safari

Question

I'm working on a simple slider, which uses CSS transitions to animate the slides. I created a pen with some basic styling and some javascript here. Note: Since Codepen uses Prefixfree I haven't used any prefixes.

The only part, which is animating is .slider__anim, not the .slider__item itself. I used position: absolute for all non active slides and position: relative for the active slide. That way I don't have to use a fixed height for my .slider.

In Chrome and Safari it works pretty well, but for some reason it just doesn't fire the CSS transitions in Firefox. Is this a bug in Firefox or is there any special markup for Firefox?

@KeesSonnema I'm using [autoprefixer](https://github.com/ai/autoprefixer) in my project and Codepen uses [Prefixfree](http://leaverou.github.io/prefixfree/) to take care of all the different prefixes. — mrksbnch, Mar 13 '14 at 12:08
@demrks Seems to me that prefixfree breaks transforms on FF. updated the pen particularly for FF. Check this out: http://codepen.io/anon/pen/Gudnq — Hashem Qolami, Mar 13 '14 at 12:43

score 1 · Accepted Answer · answered Mar 13 '14 at 17:22

1

For everybody, who has the same problem: It's a bug in Firefox, see: https://bugzilla.mozilla.org/show_bug.cgi?id=625289

answered Mar 13 '14 at 17:22

mrksbnch

1,792
2
28
46

CSS3 transition (transform) not working in Firefox, but in Chrome and Safari

1 Answers1