Slick: Hidden slides flicker when sliding and break through the overflow - Internet Explorer

[DustinJSilk]

You can see it here in internet explorer only
https://www.sanlamreality.co.za/benefit/dining/?mlp-province=Western+Cape&mlp-area=20c58b5f-4f71-49bc-9b5d-cb9f99553992

When sliding the slider, the images outside flicker and show for a few split seconds. I've tried everything. Im sure its a browser rendering issue, but is there a way to fix it?

The slides on the home page with less elements seem to be okay. If i slide them really fast they also have a subtle flicker but its not noticeable.

[andyrh3]

Yes I have the same issue where I have the images within a div for cropping purposes. In IE the images flicker when animated! This need fixing asap please. It's a great slider but unfortunately it won't be 'the last slider ever needed' if common bugs like these are not fixed.

[saress]

I also have this issue in IE (flickering and breaking through overflow), but it only happens when you use the fade:true mode. I also have tried to use the IE Emulation and it seems to work fine in IE9 and goes wrong in IE10 and Edge.

[saress]

As a temporary workaround, this fixes the issue for me:

.slick-slider .slick-list, .slick-track, .slick-slide, .slick-slide img { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: none; -o-transform: translate3d(0, 0, 0); transform: none; }

Best regards
saress

[david-ny]

I had similar issues, but not limited to images. I think too it's a rendering bug in ie.

My solution was to change the transform method from translate3d to translate.
(at 3 places in slick.js and once in slick.css. Maybe I will send a PR sometime.)

I didn't have time to read through the code, but I think translate3d is only used to take advantage of hardware acceleration when available.

I think this is a serious issue. If there is no workaround, then there should be an option to use translate instead of translate3d.

[ahmadalfy]

@d4v3c interesting, can you create a jsfiddle when you have time? I am sure that we are using translate3d for hardware acceleration. Could switch to will-change property if that fix it.

[xkgoldxsite]

Hi. in google chrome the same problem. After several cycles image in first slide is flickering

-webkit-transform: translate3d(0, 0, 0); change on -webkit-transform: none; not helpd

@d4v3c Thanks it helped

[ninjaonsafari]

@xkgoldxsite I have the exactly same issue. Have you found a solution?

You can see it http://baswa.opten.ch/en/

[taylorKonigsmark]

I am seeing the same issue here:

https://cotacchevrolet.com.br/

I can help investigate if you want to get with me @simeydotme

[DemianD]

I have the same issue

Fixed with useCSS:false

[cozzbie]

Same issue. useCSS: false makes for less smooth transitions. Any other "non-hack" solutions?

[ddogun]

.slick-initialized .slick-slide
{
display: block;
overflow:hidden;
}
exchange in css !!
I have the same issue ~!

[bmcalees]

One of my slides had a an overflow:scroll-y which was causing this issue. Removed it and everything worked fine.

[Rhemm]

I've had same issue. And tried a bunch of solutions. And only one which helped me was adding useTransform: false to settings when initialized slider

[LennonR]

I had to do useTransform: false in the init options and also

.slick-slider .slick-track, .slick-slider .slick-list { transform: none; }

[kgilfillan]

@LennonR your solution works great, thanks!

[vishvendrasingh]

None of above worked in my case. But I checked that the previous of first and next of last element has their id missing so got this working for 3 slides this way -

        $("[data-slick-index=-1]").find('.success_stories_img').attr('id', 'success_stories_img_3'); //when first time loads for previous slide
    $('.main-class').on('beforeChange', function(event, slick, currentSlide, nextSlide){
        if(nextSlide==0){
            $("[data-slick-index=-1]").find('.class_img').attr('id', 'class_img_3');
        }
        if(nextSlide==2){
            $("[data-slick-index=3]").find('.class_img').attr('id', 'class_img');
        }
    }); 

[PriyaNayak89]

Kindly stop me from this thread

Thanks,

On Thu, 20 Dec 2018, 4:38 pm Vishvendra Singh <[email protected]
wrote:

None of above worked in my case. But I checked that the previous of first
and next of last element has their id missing so got this working for 3
slides this way -

```
$("[data-slick-index=-1]").find('.success_stories_img').attr('id', 'success_stories_img_3'); //when first time loads for previous slide
$('.main-class').on('beforeChange', function(event, slick, currentSlide, nextSlide){
if(nextSlide==0){
$("[data-slick-index=-1]").find('.class_img').attr('id', 'class_img_3');
}
if(nextSlide==2){
$("[data-slick-index=3]").find('.class_img').attr('id', 'class_img');
}
});

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/kenwheeler/slick/issues/1158#issuecomment-448985321,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AkRsE0vtCsdxbGqObqFE-tr82X-puxlZks5u64S6gaJpZM4DxLoL
.

[brad1001]

@LennonR Solution worked for me, but I had a problem with a menu dropdown sitting behind the slideshow after adding the css so I needed to add a z-index like this:

.slick-slider .slick-track, .slick-slider .slick-list { transform: none; z-index: 1; }

Thanks