Menu icon Foundation
"fade" css BUG in Orbit?

I am trying to use Fade aniamtion for orbit on chrome 33, but it creates a full screen dark overlay on top of my first 3 slides. The rest of slide doesn't have the overlay. However, all images have opacity 0.01, and I can see through to the next image...
Here's the code I find where the problem could be. I don't understand why there are so many prefixes when we can use mixins from compass and yet the translate3d(0,0,0) are not all prefixed for some classes. It might be purposely done, but I am not sure.
Until now, I still couldn't figure out a solution, please reply if anyone have some ideas. I will report this on gibhub too.

note: The slide animation works fine tho.

            // Prevents images (and captions) from disappearing after first rotation on Chrome for Android
        -webkit-transform: translateZ(0);

        img { display: block; max-width: 100%; }
        
        &.fade > * {
          -webkit-transform: translate3d(0,0,0);
          opacity: 0.01;
          transition: opacity .25s ease-in-out;
          -moz-transition: opacity .25s ease-in-out;
          -webkit-transition: opacity .25s ease-in-out;
          &.animate-in {
            opacity: 1;
            z-index: 20;
            transition: opacity 500ms ease-in-out;
            -moz-transition: opacity 500ms ease-in-out;
            -webkit-transition: opacity 500ms ease-in-out;
          }
          &.animate-out {
            opacity: 0.01;
            z-index: 10;
            transition: opacity 500ms ease-in-out;
            -moz-transition: opacity 500ms ease-in-out;
            -webkit-transition: opacity 500ms ease-in-out;
          }
        }
        &.swipe-next > * {
          -webkit-transform: translate3d(100%,0,0);
          &.animate-in {
            -webkit-transform:translate3d(0,0,0);
            -moz-transform:translate3d(0,0,0);
            -ms-transform:translate3d(0,0,0);
            -o-transform:translate3d(0,0,0);
            transform:translate3d(0,0,0);
            -webkit-transition-duration:500ms;
            -moz-transition-duration:500ms;
            -o-transition-duration:500ms;
            transition-duration:500ms;
          }
          &.animate-out {
            -webkit-transform:translate3d(-100%,0,0);
            -moz-transform:translate3d(-100%,0,0);
            -ms-transform:translate3d(-100%,0,0);
            -o-transform:translate3d(-100%,0,0);
            transform:translate3d(-100%,0,0);
            -webkit-transition-duration:500ms;
            -moz-transition-duration:500ms;
            -o-transition-duration:500ms;
            transition-duration:500ms;
          }
        }

        &.swipe-prev > * {
          -webkit-transform:translate3d(-100%,0,0);
          -moz-transform:translate3d(-100%,0,0);
          -ms-transform:translate3d(-100%,0,0);
          -o-transform:translate3d(-100%,0,0);
          transform:translate3d(-100%,0,0);
          &.animate-in {
            -webkit-transform:translate3d(0,0,0);
            -moz-transform:translate3d(0,0,0);
            -ms-transform:translate3d(0,0,0);
            -o-transform:translate3d(0,0,0);
            transform:translate3d(0,0,0);
            -webkit-transition-duration:500ms;
            -moz-transition-duration:500ms;
            -o-transition-duration:500ms;
            transition-duration:500ms;
          }
          &.animate-out {
            -webkit-transform:translate3d(100%,0,0);
            -moz-transform:translate3d(100%,0,0);
            -ms-transform:translate3d(100%,0,0);
            -o-transform:translate3d(100%,0,0);
            transform:translate3d(100%,0,0);
            -webkit-transition-duration:500ms;
            -moz-transition-duration:500ms;
            -o-transition-duration:500ms;
            transition-duration:500ms;
          }
        }

        &>* {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          -webkit-transform:translate3d(100%,0,0);
          -moz-transform:translate3d(100%,0,0);
          -ms-transform:translate3d(100%,0,0);
          -o-transform:translate3d(100%,0,0);
          transform:translate3d(100%,0,0);

          &.active {
            opacity: 1;
            top: 0;
            left: 0;
            -webkit-transform:translate3d(0,0,0);
            -moz-transform:translate3d(0,0,0);
            -ms-transform:translate3d(0,0,0);
            -o-transform:translate3d(0,0,0);
            transform:translate3d(0,0,0);
          }


         

OrbitcssscssprefixFadeanimationbug

I am trying to use Fade aniamtion for orbit on chrome 33, but it creates a full screen dark overlay on top of my first 3 slides. The rest of slide doesn't have the overlay. However, all images have opacity 0.01, and I can see through to the next image...
Here's the code I find where the problem could be. I don't understand why there are so many prefixes when we can use mixins from compass and yet the translate3d(0,0,0) are not all prefixed for some classes. It might be purposely done, but I am not sure.
Until now, I still couldn't figure out a solution, please reply if anyone have some ideas. I will report this on gibhub too.

note: The slide animation works fine tho.

            // Prevents images (and captions) from disappearing after first rotation on Chrome for Android
        -webkit-transform: translateZ(0);

        img { display: block; max-width: 100%; }
        
        &.fade > * {
          -webkit-transform: translate3d(0,0,0);
          opacity: 0.01;
          transition: opacity .25s ease-in-out;
          -moz-transition: opacity .25s ease-in-out;
          -webkit-transition: opacity .25s ease-in-out;
          &.animate-in {
            opacity: 1;
            z-index: 20;
            transition: opacity 500ms ease-in-out;
            -moz-transition: opacity 500ms ease-in-out;
            -webkit-transition: opacity 500ms ease-in-out;
          }
          &.animate-out {
            opacity: 0.01;
            z-index: 10;
            transition: opacity 500ms ease-in-out;
            -moz-transition: opacity 500ms ease-in-out;
            -webkit-transition: opacity 500ms ease-in-out;
          }
        }
        &.swipe-next > * {
          -webkit-transform: translate3d(100%,0,0);
          &.animate-in {
            -webkit-transform:translate3d(0,0,0);
            -moz-transform:translate3d(0,0,0);
            -ms-transform:translate3d(0,0,0);
            -o-transform:translate3d(0,0,0);
            transform:translate3d(0,0,0);
            -webkit-transition-duration:500ms;
            -moz-transition-duration:500ms;
            -o-transition-duration:500ms;
            transition-duration:500ms;
          }
          &.animate-out {
            -webkit-transform:translate3d(-100%,0,0);
            -moz-transform:translate3d(-100%,0,0);
            -ms-transform:translate3d(-100%,0,0);
            -o-transform:translate3d(-100%,0,0);
            transform:translate3d(-100%,0,0);
            -webkit-transition-duration:500ms;
            -moz-transition-duration:500ms;
            -o-transition-duration:500ms;
            transition-duration:500ms;
          }
        }

        &.swipe-prev > * {
          -webkit-transform:translate3d(-100%,0,0);
          -moz-transform:translate3d(-100%,0,0);
          -ms-transform:translate3d(-100%,0,0);
          -o-transform:translate3d(-100%,0,0);
          transform:translate3d(-100%,0,0);
          &.animate-in {
            -webkit-transform:translate3d(0,0,0);
            -moz-transform:translate3d(0,0,0);
            -ms-transform:translate3d(0,0,0);
            -o-transform:translate3d(0,0,0);
            transform:translate3d(0,0,0);
            -webkit-transition-duration:500ms;
            -moz-transition-duration:500ms;
            -o-transition-duration:500ms;
            transition-duration:500ms;
          }
          &.animate-out {
            -webkit-transform:translate3d(100%,0,0);
            -moz-transform:translate3d(100%,0,0);
            -ms-transform:translate3d(100%,0,0);
            -o-transform:translate3d(100%,0,0);
            transform:translate3d(100%,0,0);
            -webkit-transition-duration:500ms;
            -moz-transition-duration:500ms;
            -o-transition-duration:500ms;
            transition-duration:500ms;
          }
        }

        &>* {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          -webkit-transform:translate3d(100%,0,0);
          -moz-transform:translate3d(100%,0,0);
          -ms-transform:translate3d(100%,0,0);
          -o-transform:translate3d(100%,0,0);
          transform:translate3d(100%,0,0);

          &.active {
            opacity: 1;
            top: 0;
            left: 0;
            -webkit-transform:translate3d(0,0,0);
            -moz-transform:translate3d(0,0,0);
            -ms-transform:translate3d(0,0,0);
            -o-transform:translate3d(0,0,0);
            transform:translate3d(0,0,0);
          }


         
Rafi Benkual over 5 years ago

Did you post this on GitHub, because this is the second report I've heard of this.

samjin over 5 years ago

yes. there was no reply here and so I post the bug over there. I think the problem is that the transition3d property is not working in different browser especially it doesn't work well with chrome. btw, I saw other people having the same problem.

Stephen Parke over 5 years ago

I've also encountered this opacity/fade issue. The non-active LI's in my slider were keeping a 0.01 opacity, so you could see "ghosts" of other slides on top of the .active one.

Silly workaround, but I found assigning a higher z-index to li.active seems to help.

Rafi Benkual over 5 years ago

Since you posted this, there had been a fix made and added to 5.2.2. You can update to 5.2.2 to resolve it.