Chrome CSS3 动画故障答案

【问题标题】：Chrome CSS3 animation glitchChrome CSS3 动画故障
【发布时间】：2014-11-24 23:53:40
【问题描述】：

我使用的是 Chrome 版本 37.0.2062.120 m

我在 owl carousel 2 中创建了一个轮播，并为过渡添加了许多不同的 CSS3 动画。问题是 Chrome 在任何转换过程中总是在屏幕上保留轮播左上角的一部分。

它不是保留在屏幕上的元素，而是穿过旋转木马的不同大小的故障。

我在这里举了一个例子：

Javascript

    this.$el.owlCarousel({
      nav:true,
      autoplay:true,
      items:1,
      margin:5,
      loop:true,
      center:true,
      onTranslated: _.bind(this.translated,this),
      animateIn: 'fadeInDown',   // <-- css3 transition class
      animateOut: 'fadeOutDown',   // <-- css3 transition class
    });

    // gets the id of the slide and updates the data
    translated: function (){
    var currentSlideId = this.$el.find(".owl-item.active > .item").attr('id');
    slideModule.loadSlide(currentSlideId);
  }

css

    @-webkit-keyframes fadeInUp {
      0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
                transform: translate3d(0, 100%, 0);
      }

      100% {
        opacity: 1;
        -webkit-transform: none;
                transform: none;
      }
    }

    @keyframes fadeInUp {
      0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
                transform: translate3d(0, 100%, 0);
      }

      100% {
        opacity: 1;
        -webkit-transform: none;
                transform: none;
      }
    }

    .fadeInUp {
      -webkit-animation-name: fadeInUp;
              animation-name: fadeInUp;
    }

@-webkit-keyframes fadeOutUp {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
}

@keyframes fadeOutUp {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
}

.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
          animation-name: fadeOutUp;
}

【问题讨论】：

也许您可以在 js fiddle 中展示一个示例或插入到您的帖子中 - 否则这些信息毫无用处。
它是 Chrome 特有的，我相信我的代码是正确的，我希望有人之前遇到过这个故障并且知道修复 - 希望有一个带有 webkit 供应商前缀的 css3 神奇线。跨度>
希望有人注意到同样的问题是一个很长的问题 - 如果您可以提供示例代码和一个实时示例（通过上述 js fiddle），那么任何有或没有问题的人都可以帮助您.
我看到了同样的事情。我正在使用 jQuery 更新 CSS 比例和位置，Chrome 37.0.2062.124 m 将我的 Bootstrap 面板的边缘留在周围。
我现在看到我是一个次要版本：googlechromereleases.blogspot.com/2014/10/… 在 38.0.2125.101 m 中，我看到的伪影较少，尽管仍有一些垂直线。

标签： css google-chrome animation backbone.js

【解决方案1】：

你可以试试：

owl-carousel .owl-item { -webkit-transform: translateZ(0) !important;   }

希望对你有帮助:)

【讨论】：