search

kenwheeler / slick

the last carousel you'll ever need
kenwheeler.github.io/slick
MIT License
28.49k stars 5.89k forks source link

Extra space under slideshow at certain widths in Google Chrome. #2891

Open merravid opened 7 years ago

merravid commented 7 years ago

When using slick slider in responsive mode, at certain screen widths, a large extra space appears below the slideshows, the height of which corresponds to the height of the slides in the slideshow.

The issue seems to be related to the width of ".slick-track". Google Chrome seems to render this element fractionally less than what is calculated by the component which results in overflow of the last slide appearing under the existing slideshow.

The issue only happens when arrows: true and fade: false. Also, the issue only happens in Google Chrome.

See: https://jsfiddle.net/jgw3ucap/

If Chrome inpector is used to increase the width of ".slick-track" by 1 pixel the issue is resolved. In code, adding 1 to the $slideTrack width calculation on line 1939, seems to fix the issue.

Using Slick 1.6.0 Using Chrome 58.0.3029.96.

iamsoorena commented 7 years ago

same problem for me. I changed the slidesToShow to a bigger number and it fixed. I should note that, I have set the slidesToShow as window.innerWidth / 400 and it is calculated responsively.