鉻CSS3動畫毛刺

我使用鉻版37.0.2062.120米鉻CSS3動畫毛刺

我有貓頭鷹轉盤2中創建的圓盤傳送帶和加入多個不同的CSS3動畫用於轉換。問題在於Chrome在任何轉換過程中始終在屏幕左上角保留一部分屏幕。

它不是屏幕上保存的元素，而是通過旋轉木馬切割的不同大小的小故障。

我已經包含了這個範例：

The top image shows during the transition, the bottom one at the end of transition

的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; 
}

來源

2014-09-30 conor909

，也許你可以在一個js小提琴顯示一個例子或插入到您的帖子 - 否則這個信息是相當無用的。 – Novocaine 2014-09-30 11:14:02

這是特定於Chrome，我相信我的代碼是正確的，我希望有人遇到這個故障之前，並知道一個修補程序 - 希望與css3魔術線與webkit供應商前綴。 – conor909 2014-09-30 11:56:30

希望有人已經注意到同樣的問題是一個長鏡頭 - 如果你可以提供示例代碼和一個現場示例（通過前面提到的js小提琴），那麼任何有或沒有問題的人都可以幫助你。 – Novocaine 2014-09-30 12:07:34

你可以試試：

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

希望它能幫助:)

來源

2015-10-15 18:42:25

鉻CSS3動畫毛刺

回答

相關問題