Edge of slider shows next slide using Drupal Slick.js Slider

We are using Slick Slider on a site and there is a 1px slice of the next slide showing in Safari.

Can anyone offer some advice on this, is it a CSS issue or a javascript issue with Safari?

This is using the Drupal slick module.

Rendered HTML

<div class=
"slick-wrapper slick-wrapper--asnavfor slick-wrapper--fullwidth">
  <div class=
  "slick slick--slider slick--optionset--content-page-slider-main slick--skin--fullwidth slick--float slick--has-arrow-down content_page_slider--for slick--display--main slick-processed"
  id="slick-views-content-page-slider-1">
    <div id="slick-views-content-page-slider-1-slider" class=
    "slick__slider slick-initialized slick-slider" data-config=
    "{&quot;asNavFor&quot;:&quot;#slick-views-content-page-slider-1-thumbnail-slider&quot;,&quot;arrows&quot;:false,&quot;lazyLoad&quot;:&quot;progressive&quot;,&quot;edgeFriction&quot;:0.15}">
    <div aria-live="polite" class="slick-list draggable"
      tabindex="0">
        <div class="slick-track" style=
        "opacity: 1; width: 8190px; transform: translate3d(-1170px, 0px, 0px);">
        <div class=
        "slick__slide slide slide--4 slick-slide slick-cloned"
        data-slick-index="-1" aria-hidden="true" style=
        "width: 1170px;">
            <div class="slide__content">
              <div class="field-slideshow-images">
                <img class="main-banner-image" src=
                "http://test-woolamai-beach-house.pantheon.io/sites/default/files/styles/main_banner_image/public/woolamai_beach_house_garden_view_0.jpg?itok=kDZplCkS" />
              </div>
            </div>
          </div>
          <div class=
          "slick__slide slide slide--0 slick-slide slide--current slick-active"
          data-slick-index="0" aria-hidden="false" style=
          "width: 1170px;">
            <div class="slide__content">
              <div class="field-slideshow-images">
                <img class="main-banner-image" src=
                "http://test-woolamai-beach-house.pantheon.io/sites/default/files/styles/main_banner_image/public/woolamai_beach_house_upstairs_master_view_0.jpg?itok=jcRT7hnl&amp;c=c76f5764a09bd40100acd53593ac8dfa" />
              </div>
            </div>
          </div>
          <div class="slick__slide slide slide--1 slick-slide"
          data-slick-index="1" aria-hidden="true" style=
          "width: 1170px;">
            <div class="slide__content">
              <div class="field-slideshow-images">
                <img class="main-banner-image" src=
                "http://test-woolamai-beach-house.pantheon.io/sites/default/files/styles/main_banner_image/public/woolamai_beach_house_beach_1.jpg?itok=KbTEgpZe&amp;c=77bef140990b6d505ccd43f0c11bc58f" />
              </div>
            </div>
          </div>
          <div class="slick__slide slide slide--2 slick-slide"
          data-slick-index="2" aria-hidden="true" style=
          "width: 1170px;">
            <div class="slide__content">
              <div class="field-slideshow-images">
                <img class="main-banner-image" src=
                "http://test-woolamai-beach-house.pantheon.io/sites/default/files/styles/main_banner_image/public/20151106_woolamai_87_0.jpg?itok=ew5c4nrt&amp;c=1c371698bba9a4a1779caa9b36e56c60" />
              </div>
            </div>
          </div>
          <div class="slick__slide slide slide--3 slick-slide"
          data-slick-index="3" aria-hidden="true" style=
          "width: 1170px;">
            <div class="slide__content">
              <div class="field-slideshow-images">
                <img class="main-banner-image" src=
                "http://test-woolamai-beach-house.pantheon.io/sites/default/files/styles/main_banner_image/public/woolamai_beach_house_upstairs_master_view_0_1.jpg?itok=2MjHOtZd&amp;c=3e2358112a9d75fd194fa80439939410" />
              </div>
            </div>
          </div>
          <div class="slick__slide slide slide--4 slick-slide"
          data-slick-index="4" aria-hidden="true" style=
          "width: 1170px;">
            <div class="slide__content">
              <div class="field-slideshow-images">
                <img class="main-banner-image" src=
                "http://test-woolamai-beach-house.pantheon.io/sites/default/files/styles/main_banner_image/public/woolamai_beach_house_garden_view_0.jpg?itok=kDZplCkS" />
              </div>
            </div>
          </div>
          <div class=
          "slick__slide slide slide--0 slick-slide slick-cloned"
          data-slick-index="5" aria-hidden="true" style=
          "width: 1170px;">
            <div class="slide__content">
              <div class="field-slideshow-images">
                <img class="main-banner-image" src=
                "http://test-woolamai-beach-house.pantheon.io/sites/default/files/styles/main_banner_image/public/woolamai_beach_house_upstairs_master_view_0.jpg?itok=jcRT7hnl&amp;c=c76f5764a09bd40100acd53593ac8dfa" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div><button type="button" data-role="none" class=
    "slick-prev slick-nav">Previous</button> <button type="button"
    data-role="none" class="slick-next slick-nav">Next</button>
  </div>
  <div class=
  "slick slick--carousel slick--optionset--content-page-slider-nav slick--skin--classic slick--center content_page_slider--nav slick--display--thumbnail slick-processed"
  id="slick-views-content-page-slider-1-thumbnail">
    <div id="slick-views-content-page-slider-1-thumbnail-slider"
    class="slick__slider slick-initialized slick-slider"
    data-config=
    "{&quot;asNavFor&quot;:&quot;#slick-views-content-page-slider-1-slider&quot;,&quot;centerMode&quot;:true,&quot;centerPadding&quot;:&quot;0&quot;,&quot;draggable&quot;:false,&quot;focusOnSelect&quot;:true,&quot;lazyLoad&quot;:&quot;progressive&quot;,&quot;slidesPerRow&quot;:3,&quot;slide&quot;:&quot;.slick__slide&quot;,&quot;slidesToShow&quot;:3,&quot;slidesToScroll&quot;:3,&quot;touchMove&quot;:false}">
    <div aria-live="polite" class="slick-list" tabindex="0"
      style="padding: 0px;">
        <div class="slick-track" style=
        "opacity: 1; width: 4420px; transform: translate3d(-1020px, 0px, 0px);">
        <div class=
        "slick__slide slide slide--1 slick-slide slick-cloned"
        data-slick-index="-4" aria-hidden="true" style=
        "width: 310px;">
            <img class="thumbnail-260x165" src=
            "http://test-woolamai-beach-house.pantheon.io/sites/default/files/styles/thumbnail_260x165/public/woolamai_beach_house_beach_1.jpg?itok=jDtEu-oN&amp;c=46ecfc35be474cdaf88fc08ebd4c09dc" />
          </div>
          <div class=
          "slick__slide slide slide--2 slick-slide slick-cloned"
          data-slick-index="-3" aria-hidden="true" style=
          "width: 310px;">
            <img class="thumbnail-260x165" src=
            "http://test-woolamai-beach-house.pantheon.io/sites/default/files/styles/thumbnail_260x165/public/20151106_woolamai_87_0.jpg?itok=DST50iVI&amp;c=f385a5f53651b861eba3f64b9f59ebca" />
          </div>
          <div class=
          "slick__slide slide slide--3 slick-slide slick-cloned"
          data-slick-index="-2" aria-hidden="true" style=
          "width: 310px;">
            <img class="thumbnail-260x165" src=
            "http://test-woolamai-beach-house.pantheon.io/sites/default/files/styles/thumbnail_260x165/public/woolamai_beach_house_upstairs_master_view_0_1.jpg?itok=BpCmxDE1&amp;c=d508a1b24119b7633a7fbd9cdf62a28e" />
          </div>
          <div class=
          "slick__slide slide slide--4 slick-slide slick-cloned slick-active"
          data-slick-index="-1" aria-hidden="false" style=
          "width: 310px;">
            <img class="thumbnail-260x165" src=
            "http://test-woolamai-beach-house.pantheon.io/sites/default/files/styles/thumbnail_260x165/public/woolamai_beach_house_garden_view_0.jpg?itok=xsaPHwsd" />
          </div>
          <div class=
          "slick__slide slide slide--0 slick-slide slick-active slick-center slide--current"
          data-slick-index="0" aria-hidden="false" style=
          "width: 310px;">
            <img class="thumbnail-260x165" src=
            "http://test-woolamai-beach-house.pantheon.io/sites/default/files/styles/thumbnail_260x165/public/woolamai_beach_house_upstairs_master_view_0.jpg?itok=lWw43Bg9&amp;c=aaa1133179ec5604fae6f639c2e4c43b" />
          </div>
          <div class=
          "slick__slide slide slide--1 slick-slide slick-active"
          data-slick-index="1" aria-hidden="false" style=
          "width: 310px;">
            <img class="thumbnail-260x165" src=
            "http://test-woolamai-beach-house.pantheon.io/sites/default/files/styles/thumbnail_260x165/public/woolamai_beach_house_beach_1.jpg?itok=jDtEu-oN&amp;c=46ecfc35be474cdaf88fc08ebd4c09dc" />
          </div>
          <div class="slick__slide slide slide--2 slick-slide"
          data-slick-index="2" aria-hidden="true" style=
          "width: 310px;">
            <img class="thumbnail-260x165" src=
            "http://test-woolamai-beach-house.pantheon.io/sites/default/files/styles/thumbnail_260x165/public/20151106_woolamai_87_0.jpg?itok=DST50iVI&amp;c=f385a5f53651b861eba3f64b9f59ebca" />
          </div>
          <div class="slick__slide slide slide--3 slick-slide"
          data-slick-index="3" aria-hidden="true" style=
          "width: 310px;">
            <img class="thumbnail-260x165" src=
            "http://test-woolamai-beach-house.pantheon.io/sites/default/files/styles/thumbnail_260x165/public/woolamai_beach_house_upstairs_master_view_0_1.jpg?itok=BpCmxDE1&amp;c=d508a1b24119b7633a7fbd9cdf62a28e" />
          </div>
          <div class="slick__slide slide slide--4 slick-slide"
          data-slick-index="4" aria-hidden="true" style=
          "width: 310px;">
            <img class="thumbnail-260x165" src=
            "http://test-woolamai-beach-house.pantheon.io/sites/default/files/styles/thumbnail_260x165/public/woolamai_beach_house_garden_view_0.jpg?itok=xsaPHwsd" />
          </div>
          <div class=
          "slick__slide slide slide--0 slick-slide slick-cloned slick-center"
          data-slick-index="5" aria-hidden="true" style=
          "width: 310px;">
            <img class="thumbnail-260x165" src=
            "http://test-woolamai-beach-house.pantheon.io/sites/default/files/styles/thumbnail_260x165/public/woolamai_beach_house_upstairs_master_view_0.jpg?itok=lWw43Bg9&amp;c=aaa1133179ec5604fae6f639c2e4c43b" />
          </div>
          <div class=
          "slick__slide slide slide--1 slick-slide slick-cloned"
          data-slick-index="6" aria-hidden="true" style=
          "width: 310px;">
            <img class="thumbnail-260x165" src=
            "http://test-woolamai-beach-house.pantheon.io/sites/default/files/styles/thumbnail_260x165/public/woolamai_beach_house_beach_1.jpg?itok=jDtEu-oN&amp;c=46ecfc35be474cdaf88fc08ebd4c09dc" />
          </div>
          <div class=
          "slick__slide slide slide--2 slick-slide slick-cloned"
          data-slick-index="7" aria-hidden="true" style=
          "width: 310px;">
            <img class="thumbnail-260x165" src=
            "http://test-woolamai-beach-house.pantheon.io/sites/default/files/styles/thumbnail_260x165/public/20151106_woolamai_87_0.jpg?itok=DST50iVI&amp;c=f385a5f53651b861eba3f64b9f59ebca" />
          </div>
          <div class=
          "slick__slide slide slide--3 slick-slide slick-cloned"
          data-slick-index="8" aria-hidden="true" style=
          "width: 310px;">
            <img class="thumbnail-260x165" src=
            "http://test-woolamai-beach-house.pantheon.io/sites/default/files/styles/thumbnail_260x165/public/woolamai_beach_house_upstairs_master_view_0_1.jpg?itok=BpCmxDE1&amp;c=d508a1b24119b7633a7fbd9cdf62a28e" />
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

screen.css

/**================================================================================================================/
*
* @SLICK THEME
*
*=================================================================================================================*/
/* line 270, ../sass/partials/parcel_panes/_content-slider.scss */
.slick-prev {
    left: 55px !important;
}

/* line 274, ../sass/partials/parcel_panes/_content-slider.scss */
.slick-next {
    right: 55px !important;
}

/* line 278, ../sass/partials/parcel_panes/_content-slider.scss */
.slick-prev, .slick-next {
    background: #fafafa;
    -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
}

/* line 280, ../sass/partials/parcel_panes/_content-slider.scss */
.slick-prev.slick-disabled, .slick-next.slick-disabled {
    opacity: 0;
}

/* line 287, ../sass/partials/parcel_panes/_content-slider.scss */
.slick-prev:hover, .slick-next:hover {
    background: white;
    -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
}

/* line 290, ../sass/partials/parcel_panes/_content-slider.scss */
.slick-prev:hover:before, .slick-next:hover:before {
    color: #cccccc !important;
    background: white;
}

/* line 296, ../sass/partials/parcel_panes/_content-slider.scss */
.slick-prev:focus, .slick-prev:active, .slick-next:focus, .slick-next:active {
    background: white;
    -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}

/* line 299, ../sass/partials/parcel_panes/_content-slider.scss */
.slick-prev:focus:before, .slick-prev:active:before, .slick-next:focus:before,
.slick-next:active:before {
    color: #e6e6e6 !important;
    background: white;
}

/* line 308, ../sass/partials/parcel_panes/_content-slider.scss */
.slick-prev:before, .slick-next:before {
    font-family: FontAwesome;
    font-size: 40px;
    line-height: 1;
    color: #cccccc !important;
    opacity: 0.75;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* line 317, ../sass/partials/parcel_panes/_content-slider.scss */
.slick-prev:before {
    content: "\f177";
}

/* line 318, ../sass/partials/parcel_panes/_content-slider.scss */
[dir="rtl"] .slick-prev:before {
    content: "\f177";
}

/* line 320, ../sass/partials/parcel_panes/_content-slider.scss */
[dir="rtl"] .slick-next {
    left: -10px;
    top: 70px;
    right: auto;
}

/* line 321, ../sass/partials/parcel_panes/_content-slider.scss */
.slick-next:before {
    content: "\f178";
}

/* line 322, ../sass/partials/parcel_panes/_content-slider.scss */
[dir="rtl"] .slick-next:before {
    content: "\f178";
}

slick-fullwidth.css

/**
 * @file
 * Detailed stylings are all yours, get yourself dirty.
 */
.slick--skin--fullwidth {
  text-shadow: none;
}

.slick--skin--fullwidth .slide__caption {
  font-size: 22px;
  font-size: 1.375rem;
  color: #fff;
}

.slick--skin--fullwidth .slide__media img {
  width: 100%;
}

.slick--skin--fullwidth .slide__title {
  color: #fff;
  font-size: 48px;
  font-size: 3rem;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
}

.slick--skin--fullwidth .slide__link a {
  border-bottom: 2px solid rgba(255, 255, 255, 0.8);
  border-top: 2px solid rgba(255, 255, 255, 0.8);
  color: #fff;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
}

.slick--skin--fullwidth .slide__link a:hover {
  border-color: #fff;
  color: #fff;
  text-decoration: none;
}

.slick--skin--fullwidth .slide__constrained {
  zoom: 1;
  min-height: 210px;
}

.slick--skin--fullwidth .slide__constrained::after {
  content: "";
  display: table;
  clear: both;
}

.slick--skin--fullwidth .slide__constrained .slide__caption {
  position: relative;
}

@media (min-width: 65em) {
  .slick--skin--fullwidth .slide__constrained {
    left: 50%;
    margin-left: -49%;
    position: absolute;
    top: 15%;
    width: 98%;
    z-index: 2;
  }
}

@media (min-width: 90em) {
  .slick--skin--fullwidth .slide__constrained {
    left: 50%;
    margin-left: -585px;
    position: absolute;
    top: 0;
    width: 1170px;
    z-index: 2;
  }
}

Solution

If you think its Javascript I suggest you turn it off or display this without calling the javascript functions.

If you still see the 1px line then it must be css and I'd suggest you check which version of Safari you use and what is supported by slick slider.