UI Bootstrap Fade Carousel flashes white

Question

I am trying to create a fade transition carousel for my website created with Bootstrap and AngularJS. I have created the effect but I keep getting this flash to white between each slide instead of a nice fade over the previous image. You can see an example of it here now (until the question is answered or I fix it up):

http://development.artlyticalmedia.com/portfolio

I am using UI Bootstrap because it makes Bootstrap play nice with AngularJS, which already makes most of the solutions out there inaccurate because my html looks like this:

<div class="container-fluid text-center" ng-controller="PortfolioCtrl" id="portfolio">
  <carousel interval="interval" class="carousel-fade">
    <slide ng-repeat="slide in slides" active="slide.active">
      <img ng-src="{{slide.image}}" alt="{{slide.alt}}">
    </slide>
  </carousel>
</div>

Notice that the <carousel> element is not present in a standard Bootstrap carousel; I believe it is a <div class="carousel">. My SCSS, which ought to give the correct effect, looks like this:

.carousel-fade {
  .carousel-inner {
    .item {
      transition-property: opacity;
      transition-duration: 1s;
      opacity: 0;
    }

    .active {
      opacity: 1;
    }

    .active.left,
    .active.right {
      left: 0;
      opacity: 0;
      z-index: 1;
    }

    .next.left,
    .prev.right {
      opacity: 1;
    }
  }

  .carousel-control {
    z-index: 2;
  }
}

My Javascript is pretty standard, except that I disable $animate because this was a fix I had to implement before. Here it is anyways:

angular.module('comartlyticalmediawwwApp')
  .controller('PortfolioCtrl', function ($scope, $animate) {
    $scope.interval = 3000;

    $animate.enabled(false); 
    $scope.animate = null;
    $scope.animateGlobal = true;

    $scope.slides = [
    {
      image: 'images/portfolio/websites/3dsailing-Home.png',
      alt: 'plan'
    },
    {
      image: 'images/portfolio/websites/3dsailing-SailCoachPro.png',
      alt: 'act'
    },
    {
      image: 'images/portfolio/websites/3dsailing-3D-Printing.png',
      alt: 'done'
    },
    {
      image: 'images/portfolio/websites/Glass-Planner-Home.png',
      alt: 'done'
    },
    {
      image: 'images/portfolio/websites/Glass-Planner-PlanActDone.png',
      alt: 'done'
    },
    {
      image: 'images/portfolio/websites/Glass-Planner-Tutorials.png',
      alt: 'done'
    }];
  });

http://stackoverflow.com/questions/19231678/how-can-i-change-the-sliding-animation-to-fade-in-out-with-transition-on-bootstr — Schmalzy, Feb 07 '15 at 18:07
Just added the code in the answer to my development version and it doesn't work (you can take a look, it still flashes white). I tried most, if not all, of the solutions on StackOverflow already, which is why I posted a new question. — David Rhoderick, Feb 10 '15 at 15:00

Sprazer · Answer 1 · 2015-02-11T13:12:13.167

After having this problem for some hours I finally discovered that transform: translate3d() is the reason we both had this problem.

Try to use this code:

.carousel-fade {
  .carousel-inner {
    .item {
      opacity: 0;
      -webkit-transition-property: opacity;
      transition-property: opacity;
    }

    .active {
      opacity: 1;
    }

    .active.left,
    .active.right {
      left: 0;
      opacity: 0;
      z-index: 1;
    }

    .next.left,
    .prev.right {
      opacity: 1;
    }
  }

  .carousel-control {
    z-index: 2;
  }
}

@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-inner > .item.next,
    .carousel-inner > .item.active.right {
      -webkit-transform: translate3d( 0, 0, 0);
      transform: translate3d( 0, 0, 0);
    }
    .carousel-inner > .item.prev,
    .carousel-inner > .item.active.left {
      -webkit-transform: translate3d( 0, 0, 0);
      transform: translate3d( 0, 0, 0);
    }
    .carousel-inner > .item.next.left,
    .carousel-inner > .item.prev.right,
    .carousel-inner > .item.active {
       -webkit-transform: translate3d(0, 0, 0);
       transform: translate3d(0, 0, 0);
    }
}

Thanks for this answer @Sprazer but it hasn't worked for me yet. How are you implementing it? Do you use it with the code above? Do you mix the code or have one before the other? In the latter, which comes first? — David Rhoderick, Feb 11 '15 at 12:49
Simply copy and paste this code to the bottom of your CSS file. Also make sure you include your own css after bootstrap. — Sprazer, Feb 11 '15 at 13:03
This worked for me! Keep in mind this the solution above is SASS, not pure CSS. To use as pure CSS run it through an online processor such as SassMeister.com — lukemcd, Dec 11 '15 at 21:24

score 0 · Answer 2 · edited May 23 '17 at 12:33

Expanding on what Sprazer wrote, here's a mixin version you can use and add it to the top-level of your SCSS sheet:

@mixin carousel-fade() {

.carousel {

  .carousel-inner {

    >.item {
      opacity: 0;
      -webkit-transition-property: opacity;
      transition-property: opacity;

          @media all and (transform-3d), (-webkit-transform-3d) {

            &.next,
            &.active.right,
            &.prev,
            &.active.left,
            &.next.left,
            &.prev.right,
            &.active {
              -webkit-transform: translate3d( 0, 0, 0);
              transform: translate3d( 0, 0, 0);
            }

          }

    }

    .active {
      opacity: 1;
    }

    .active.left,
    .active.right {
      left: 0;
      opacity: 0;
      z-index: 1;
    }

    .next.left,
    .prev.right {
      opacity: 1;
    }
  }

  .carousel-control {
    z-index: 2;
  }



}

}

score 0 · Answer 3 · answered Jun 15 '23 at 13:10

0

I found this and it works for me :

/* Fix for flickering carousel */                                                      
.carousel-inner .carousel-item {
  opacity: 0;
  top: 0;
  left: 0;
  width: 100%;
  display: block;
  position: absolute;
}
.carousel-inner .carousel-item:first-of-type {
  position: relative;
}
.carousel-inner .active {
  opacity: 1;
}
/* End of fix */

answered Jun 15 '23 at 13:10

Kaito Flash

33
1
1
5

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 17 '23 at 07:15

score -1 · Answer 4 · edited Dec 06 '22 at 11:32

-1

I am not an expert, but what works for me is:


.carousel-item {
    transition: none!important;
}

Put that in the CSS and the white flash goes away.

edited Dec 06 '22 at 11:32

Jeff Schaller

2,352
5
23
38

answered Dec 01 '22 at 06:58

Atul Chourasiya

21
1

1

Can you expand upon your answer to include the specific scenario that the question is asking about? As it stands, I don't see any way that adding your answer to their code would improve the situation. – Joel Trauger Dec 05 '22 at 14:11

UI Bootstrap Fade Carousel flashes white

4 Answers4