0

I am using owl carousel spotlight with scale effect.

The overflow:hidden for the outer div is not working in IE11 during the scale transition

.spotlight{
  border: 1px solid red;
  height: 200px;
  overflow: hidden;
}
img{
  transition: all ease 2s;
  -ms-transform: scale(1);
  transform: scale(1);
}
.active img{
  -ms-transform: scale(1.5);
  transform: scale(1.5);
}
<div class="spotlight">
<div class="owl-carousel owl-theme">
<div class="item"><img src="https://placeimg.com/640/480/any" alt=""></div>
<div class="item"><img src="https://placeimg.com/640/480/any" alt=""></div>
<div class="item"><img src="https://placeimg.com/640/480/any" alt=""></div>
</div>
</div>
<script>
$(function(){
  $('.owl-carousel').owlCarousel({
  loop:true,
  autoplay: true,
  items: 1,
  margin:10,
  nav:true,
  animateOut: 'fadeOut'
  });
})

</script>

Fiddle - https://jsfiddle.net/jt2wLx6v/7/

Felix A J
  • 6,300
  • 2
  • 27
  • 46
  • I made several tests with your sample by modifying the CSS code but the issue persists in the IE browser. while searching I found that owl carousel has many issues with the IE browser which we can't fix using code. I suggest you create an issue on their GitHub page. https://github.com/OwlCarousel2/OwlCarousel2/issues?page=1&q=is%3Aissue+is%3Aopen – Deepak-MSFT Feb 27 '20 at 03:32

1 Answers1

0

IE11 has a lot of issues and this is one of them. here is a link to an already answered similar question that could help you. Let me know

Overflow property not working in IE 11

mw509
  • 1,957
  • 1
  • 19
  • 25