Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Firefox transition -> translate

Firefox transition -> translate

Problem

SO I'm using Bootstrap and I've got almost everything done but I can't get my carousel to have a transition on the caption. The transition on the carousel inner is working just fine but I want the caption to slide in from the top or bottom and fade in. It's working in IE10/11 and Webkit. but the caption transition doesn't work in FF. It does work when I manually "start" the transition with Firebug i.e. clicking the opacity value on and off. The only thing I've find thruw google-ing etc. is that u need to have the default values defined. So I triple checked that and I'm pretty sure all the default values are defined. Anyone know why it's not working? I'm guessing I forgot to declare something?

PS: I've tried using different styles to transition but none of them worked (margin-top, top and a few more). I'm using Translate so the transition runs smooth on mobile phones/tablets.

Here's my carousel code:

/*== Carousel transition ==*/
.carousel-inner > .item {
    display: none;
    width: 100%;
    position: relative;
    -webkit-transition: 1s ease-out -webkit-transform;   /* If the time is changed it also needs to be changed @ bootstrap.js -> line 359 */
    transition: 1s ease-out transform;
}
.carousel-inner > .item > img {
    width: 55%; /* Too make it fit next to side-items */
}
.carousel-inner > .item > .carousel-caption {
    opacity: 0;
    -webkit-transform: translate(0, 340px);
    transform: translate(0, 340px);
    -webkit-transition-property: opacity, -webkit-transform;
    transition-property: opacity, transform;
    transition-duration: 0.5s, 0.6s;
    transition-timing-function: ease, ease-out;
    transition-delay: 0s, 0.5s;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  max-width: 100%;
  height: auto;
  line-height: 1;
}
.carousel-inner > .active,
.carousel-inner > .next,
.carousel-inner > .prev {
  display: block;
}
.carousel-inner > .active {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}
.carousel-inner > .active > .carousel-caption {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
}
.carousel-inner > .next,
.carousel-inner > .prev {
  position: absolute;
  top: 0;
  width: 100%;
}
.carousel-inner > .next {
    -webkit-transform: translate(-150%, 0);
    transform: translate(-150%, 0);
}
.carousel-inner > .next > .carousel-caption {
    -webkit-transform: translate(0, 340px);
    transform: translate(0, 340px);
    opacity: 0;
}
.carousel-inner > .prev {
    -webkit-transform: translate(-150%, 0);
    transform: translate(-150%, 0);
}
.carousel-inner > .prev > .carousel-caption {
    -webkit-transform: translate(0, -340px);
    transform: translate(0, -340px);
    opacity: 0;
}
.carousel-inner > .next.left,
.carousel-inner > .prev.right {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}
.carousel-inner > .next.left > .carousel-caption,
.carousel-inner > .prev.right > .carousel-caption {
    -webkit-transform: translate(0, 340px);
    transform: translate(0, 340px);
    opacity: 0;
}
.carousel-inner > .active.left {
    -webkit-transform: translate(-150%, 0);
    transform: translate(-150%, 0);
}
.carousel-inner > .active.left > .carousel-caption {
    -webkit-transform: translate(0, -340px);
    transform: translate(0, -340px);
    opacity: 0;
}
.carousel-inner > .active.right {
    -webkit-transform: translate(-150%, 0);
    transform: translate(-150%, 0);
}
.carousel-inner > .active.right > .carousel-caption {
    -webkit-transform: translate(0, 340px);
    transform: translate(0, 340px);
    opacity: 0;
}
/*== Carousel transition ==*/

I've made a fiddle but I didn't get it working correcly: http://jsfiddle.net/Rudi91/sp3Nc/2/

Problem courtesy of: Rudi

Solution

After checking my code 20+ times and giving up I wen't on with the rest of the website. When I had to change the position of the carousel controls I noticed the left and right classes which I already had declared in my default stylesheet. Turns out u can't transition floating elements with Firefox, at least not perfectly. Changed my left class to floatLeft and everything is working fine now. So if anyone has a buggy transition in Firefox try checking if u got any floating elements and position them via an other method.

Solution courtesy of: Rudi

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Firefox transition -> translate

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×