IE11はCSS変換時にオーバーフローを無視します

Question

http://codepen.io/anon/pen/dpyLOE - カルーセルの移動時に、前後のスライドが表示されます。

$(".owl-carousel").owlCarousel({ 
 
    loop: true, 
 
    autoplay: true, 
 
    items: 1, 
 
    nav: true, 
 
    autoplayHoverPause: true, 
 
    animateOut: 'slideOutUp', 
 
    animateIn: 'slideInUp' 
 
});

.owl-carousel { 
 
    max-width: 320px; 
 
} 
 
.owl-carousel .owl-nav { 
 
    padding-top: .4em; 
 
    font-family: sans-serif; 
 
    font-size: .8em; 
 
} 
 
.owl-carousel .owl-nav > div { 
 
    padding: .4em 1.4em; 
 
    border: 1px solid #333; 
 
    background: #000; 
 
    color: white; 
 
    border-radius: .4em; 
 
    background-image: linear-gradient(rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.2)); 
 
    box-shadow: 0.1em 0.1em 0.4em rgba(0, 0, 0, 0.5); 
 
} 
 
.owl-carousel .owl-nav > div:hover { 
 
    background-color: #333; 
 
} 
 
.owl-carousel .owl-nav .owl-prev { 
 
    float: left; 
 
} 
 
.owl-carousel .owl-nav .owl-next { 
 
    float: right; 
 
} 
 

 
.hidden-container { 
 
    perspective: 1000px; 
 
    border: 1px solid red; 
 
    overflow: hidden; 
 
    position: relative; 
 
    z-index: 10; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/assets/owl.theme.default.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/assets/owl.carousel.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/owl.carousel.js"></script> 
 
<div class="hidden-container"> 
 
    
 
<div class="owl-carousel"> 
 
    <img src="http://placehold.it/320x240?text=Slide%200"> 
 
    <img src="http://placehold.it/320x240?text=Slide%201"> 
 
    <img src="http://placehold.it/320x240?text=Slide%202"> 
 
    <img src="http://placehold.it/320x240?text=Slide%203"> 
 
</div> 
 
    
 
</div>

私はコンテナに追加しようとしました。これらの

perspective: 1000px; 
border: 1px solid red; 
position: relative; 
z-index: 10; 

何も動いていないようにみえ。

Answer 1

overflow:hiddenを.owl-stageに追加する必要があります。

.owl-carousel .owl-stage { 
    overflow: hidden; 
} 

$(".owl-carousel").owlCarousel({ 
 
    loop: true, 
 
    autoplay: true, 
 
    items: 1, 
 
    nav: true, 
 
    autoplayHoverPause: true, 
 
    animateOut: 'slideOutUp', 
 
    animateIn: 'slideInUp' 
 
});

.owl-carousel { 
 
    max-width: 320px; 
 
} 
 
.owl-carousel .owl-stage { 
 
    overflow: hidden; 
 
} 
 
.owl-carousel .owl-nav { 
 
    padding-top: .4em; 
 
    font-family: sans-serif; 
 
    font-size: .8em; 
 
} 
 
.owl-carousel .owl-nav > div { 
 
    padding: .4em 1.4em; 
 
    border: 1px solid #333; 
 
    background: #000; 
 
    color: white; 
 
    border-radius: .4em; 
 
    background-image: linear-gradient(rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.2)); 
 
    box-shadow: 0.1em 0.1em 0.4em rgba(0, 0, 0, 0.5); 
 
} 
 
.owl-carousel .owl-nav > div:hover { 
 
    background-color: #333; 
 
} 
 
.owl-carousel .owl-nav .owl-prev { 
 
    float: left; 
 
} 
 
.owl-carousel .owl-nav .owl-next { 
 
    float: right; 
 
} 
 

 
.hidden-container { 
 
    perspective: 1000px; 
 
    border: 1px solid red; 
 
    overflow: hidden; 
 
    position: relative; 
 
    z-index: 10; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/assets/owl.theme.default.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/assets/owl.carousel.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/owl.carousel.js"></script> 
 
<div class="hidden-container"> 
 
    
 
<div class="owl-carousel"> 
 
    <img src="http://placehold.it/320x240?text=Slide%200"> 
 
    <img src="http://placehold.it/320x240?text=Slide%201"> 
 
    <img src="http://placehold.it/320x240?text=Slide%202"> 
 
    <img src="http://placehold.it/320x240?text=Slide%203"> 
 
</div> 
 
    
 
</div>