IE11 + transition on :hover : slides outside container get visible during trans

[Tucsky]

This is a (multiple allowed):

• bug

• enhancement

• feature-discussion (RFC)

• Swiper Version: 4.4.1.

• Platform/Target and Browser Versions: IE11

• Live Link or JSFiddle/Codepen or website with isssue: https://jsfiddle.net/Tucsky/ecq0naox/embedded/result

What you did

Setup on simple carousel with 4 slidesPerViews
Add a transition on hover to highlight the hovered slide AND fadeout other slides that are not hovered

.swiper-slide {
  transition: opacity .4s ease-out;

  &:hover {
    opacity: 1 !important; // highlight hovered slide
  }
}

.swiper-container:hover .swiper-slides {
  opacity: .5; // fade out other slide
}

Expected Behavior

Hovered slide is fully opaque while others are less opaque, carousel works, and slides that are outside .swiper-container doesnt shows up.

Actual Behavior

Everything works out except when the transition of the slides occur, slides that are outside container get visible (even overflow:hidden is set on .swiper-container, as it is by default)

How to fix

Idk why but setting perspective: 1px on the wrapper fix that issue.

[nolimits4web]

IE issue, nothing can do with it