Slick: IE11 Causing Video placeholders (poster) to show and flicker for "hidden" slides

[kylanhurt]

Wanted to use this slider for our website at http://www.knowledgecity.com but it seems to have some major issues with Internet Explorer. I'm specifically using Internet Explorer 11 and it's causing the "hidden" elements to show and flicker. I am specifically using DIV elements as our slides, that contain some h3 tags and HTML 5 video. The placeholder images are from in the "poster" attributes of the HTML5 video elements.

Would love some help on this. Otherwise I may have to switch to another slider and I'm sure I'm not the only one. I have set up a JS Fiddle (that should be viewed in IE):
http://jsfiddle.net/datagonia/ta316qeL/3/

Note: Don't stress about the size of the placeholder images, that's not my issue.

Edit: Here is another JSFiddle that is based off your guys' baseline. It seems that specifically the HTML5 Video element (and post attribute for the image placeholder) is the point at which the flickering starts for me:
http://jsfiddle.net/datagonia/aoa0p8e5/

[ahmadalfy]

wow this is really weird ... I see a huge image on the left when the slide changes ...

[leggomuhgreggo]

HTML5 video is temperamental. Possibly a browser issue. Some related issues: #1440 and #932. Sorry that's not more helpful.

[kmiday]

Does anyone know if there have been any updates or resolutions to this issue? I'm experiencing the same flickering problem. Thanks!

[salazarr-js]

i have the same problem, my slides have a video background and an overlaping text, but when I slide it, the video background flickers and overposes over the text, so I solved this similar bug by placing a transformZ(0) and a greater z-index to the element I wanted to be always on top, and the video or back element stopped blinking.

[Dfenniak]

I have this problem as well :( and unfortunately the z-index thing isn't an option

[jdmagic21]

+1

[jdmagic21]

I went ahead and created an example jsFiddle of this issue: https://jsfiddle.net/codedcontainer/q7heb3yk/3/

[swayam2k15]

Unfortunately transformZ(0) and increasing the z-index are not working in my case. :(

[poebrand]

The following solution worked for me in this scenario:

• Infinite slides (results in slide clones)
• Slides to show: 1
• Slides to scroll: 1
• After load & slick setup, video from later slide showing on the left of slider.
• Appears to be an IE 11 rendering issue as... opening Developer tools with element selector... causes the video to disappear on mouse over.

I applied the following to resolve the issue:

.slider-transitioning video, .slick-current video {
    visibility: visible; /*Resolves phantom video rendering in IE 11*/
}

$slider.on('beforeChange', function (event, slick, currentSlide, nextSlide) {
    $slider.addClass('slider-transitioning');
});

$slider.on('afterChange', function (event, slick, currentSlide) {
    $slider.removeClass('slider-transitioning');
});

Where $slider is your slick jQuery selector.

[scrummer]

The solution of @poebrand works. I just had to add visibility: hidden to the video element initially that only the current and sliding video is visible. That did the trick!

Thx!

[Nicolai8]

The main issue here is how IE calculating translate3d. So, by disabling CSS transitions (useCSS: false, useTransform: false) everything will work as expected.

But in this case the animations are not as smooth as with CSS transitions, so, I used almost the same solution as @poebrand proposed but with CSS only:

.slick-slide:not(.slick-current) video {
  visibility: hidden !important;
}

[mihyunks]

I have the same problem.
and when I play video, it appears again.
this worked for me.
Thanks to @Nicolai8

.slick-slide:not(.slick-current) video {
visibility: 0 !important;
display:none !important;
}