CODEWITHSUNDEEP
cssinternet-explorercss-transitionsinternet-explorer-11
Julia
Julia

Reputation: 1321

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.

Upvotes: 2

Views: 1851

Answers (2)

bevrard
bevrard

Reputation: 119

In my case, I had to apply two changes:

.owl-stage {
    overflow: hidden !important;
}
.owl-stage-outer {
    overflow: visible !important;
}

Upvotes: 0

QoP
QoP

Reputation: 28397

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>

Upvotes: 3

Related Questions