Vertical slider sometimes has incorrect container height

thdoan commented 3 years ago

short description of the bug / issue, provide more detail below.

I've observed an intermittent issue where sometimes the vertical slider is rendered with an incorrect container height. This appears to be caused by the <ul> having display: flex.

====================================================================

What is the expected behaviour?

The vertical thumbnails slider is created in an overlay, that usually looks like this:

Correct container height:

<div class="slick-track" style="opacity: 1; height: 169px; transform: translate3d(0px, 0px, 0px);">

====================================================================

What is observed behaviour?

However, upon closing this overlay and reopening it, the thumbnails slider is reduced to 24px height:

Incorrect container height:

<div class="slick-track" style="opacity: 1; height: 24px; transform: translate3d(0px, 0px, 0px);">

====================================================================

More Details

Which browsers/versions does it happen on? Chrome Version 87.0.4280.141 (Official Build) (64-bit)
Which jQuery/Slick version are you using? jQuery 3.5.1 / Slick 1.8.1
Did this work before? I am not sure

televators commented 3 years ago

Hey dude. Did you ever figure out a workaround?

thdoan commented 3 years ago

@televators we ended up using an aspect ratio mixin to keep the thumbnails at the same aspect ratio as the main image:

/**
 * [Adds styles to allow an element's height scale proportionatelly]
 * @param  {[Number]} $width
 * @param  {[Number]} $height
 */
@mixin aspect-ratio($w, $h, $usePseudo: false, $adjust: 0px) {
  $calcH:   aspect-ratio-height($w, $h);
  $finalH:  if( $adjust != 0px, calc( #{$calcH} + #{$adjust} ), $calcH );

  @if ($usePseudo) {
    position: relative;

    &:before {
      display: block;
      content: '';
      padding-bottom: $finalH;
      width: 100%;
    }
  }

  @else {
    height: 0;
    padding-bottom: $finalH;
  }
}

/**
 * [Calculates the percentage aspect ratio (what % height is compared to the width)]
 * @param  {[Number]} $width
 * @param  {[Number]} $height
 * @return {[Number(%)]}
 */
@function aspect-ratio-height($width, $height){
  @return percentage($height / $width);
}

Sample usage assuming the image has a 1:1.25 aspect ratio:

<li class="slick-slide">
  <button class="slick-slide__button"><img></button>
</li>

.slick-slide__button {
  @include aspect-ratio(1, 1.25, true);
}

Notes:

<img> was wrapped in <button> to comply with ADA
We could've included aspect-ratio() in .slick-slide instead, but didn't want any potential conflicts with Slick.

kenwheeler / slick