Julia Julia - 3 months ago 56
CSS Question

IE11 ignores overflow:hidden during css transform

http://codepen.io/anon/pen/dpyLOE - when carousel moves, previous and next slides are visible.



$(".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>





I tried to add to container:

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


Nothing of these seems to work.

QoP QoP
Answer

You have to add overflow:hidden to .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>

Comments