Tiny-slider: Extra Offset in Microsoft Edge

[megalofauna]

__Issue description__: Slides have extra offset in Microsoft Edge.

__Demo link/slider setting__:

var slider = tns({
      container: '#liftoff-slider',
      controlsContainer: '.liftoff-slider-controls',
      mode: 'gallery',
      items: 1,
      slideBy: 'page',
      autoplayText: [
        "Play",
        "Pause"
      ],
      autoplay: true,
      autoplayButton: '.liftoff-slider-play',
      speed: 500,
      nav: false,
      lazyload: true
    });

See here, for example.

Looks like this was an issue previously (see Issue #190). I wonder if something got reverted, or Edge updated something "helpful."

_Tiny-slider version_: 2.8.6 (loaded via CDN: https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.8.6/min/tiny-slider.js)

_Browser name && version_: Microsoft Edge 42.17134.1.0, Microsoft EdgeHTML 17.17134

_OS name && version_: Windows 10 Pro

Love tns!

Thansk!

[Matthewbeck75]

Also having this issue with 2.8.6 and Edge

[nternetinspired]

Same. Latest version of tiny-slider, from CDN https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.8.6/ and latest Edge (Browserstack).

Any ideas appreciated! TIA.

[tomjrjones]

Absolutely great slider, only let down is this issue in Edge. Any ideas on how to fix this or when it will be fixed? Thanks

[Matthewbeck75]

Temporary workaround is to use version 2.7.4

[ganlanyuan]

Couldn't reproduce this issue on Microsoft EdgeHTML 17.17134, Windows 10.
Could someone make a demo page and a screen record of the issue?
Thanks

[fatcrobat]

Had the same problem, that was occured by a clear:both in my layout on .tns-item div. Remove the clear statement.

[ganlanyuan]

@megalofauna did you try v2.8.7+?
@fatcrobat Could you post your slider options and/or a demo?

[de3web]

Similar (same?) issue. @ganlanyuan

As far as I've tested, this only happens on Microsoft Edge.
It's adding margin-left to each corresponding tns-item.
Slider should be disabled at 1200px as you can see.

Version
2.9.1

Output Example:

<article class="tns-item" style="left: 0%; margin-left: calc(0% / 4)"></article>
<article class="tns-item" style="left: 50%; margin-left: calc(100% / 4)"></article>
<article class="tns-item" style="margin-left: calc(200% / 4)"></article>
<article tab-index="-1" aria-hidden="true" class="tns-item" style="margin-left: calc(300% / 4)"></article>

Options

tns({
      container: newsCarousel,
      items: 1,
      center: false,
      loop: false,
      gutter: 10,
      arrowKeys: true,
      controls: false,
      navContainer: '#news-carousel-controls',
      swipeAngle: false,
      fixedWidth: 320,
      responsive: {
        650: {
          gutter: 20,
          items: 2,
          fixedWidth: 450,
        },
        960: {
          fixedWidth: 500,
        },
        1200: {
          disable: true,
        },
      },
    });

[TwR-Slice]

@de3web have the same problem when disabling the slider on Edge. Still seaching for a fix. Have you found a workaround?

[Matthewbeck75]

@TwR-Slice Have you tried my earlier suggestion of using version 2.7.4?

[TwR-Slice]

@Matthewbeck75 yes, downgraded to 2.7.4 but we still have the left over margin and another bug occurs.

For some unknown (at least for me) reasons the slider applies all Styles as inline styles instead of using the styleSheet.

My personal workaround is now to use css against it:

.tns-item{
    margin-left: 0 !important;
}

[de3web]

@TwR-Slice Unfortunately, I implemented the same workaround as you did, but specific to edge and the breakpoint where it fails.

@media screen and (min-width: 1200px) {
  @supports (-ms-ime-align: auto) {
    .news-portal {
      &__portal {
        margin-left: 0px!important;
        left: auto!important;
      }
    }
  }
}

.newsport__portal is equivalent to .tns-item

[Ark1e]

Got the same problem with version 2.9.2.
Fixed with this workaround:

 .tns-item {
    margin-left: 0 !important;
  }

  .tns-horizontal.tns-carousel.tns-no-subpixel > .tns-item  {
    margin-right: 0 !important;
  }

[florinvasilevilsan]

If you set autoWidth: true this should prevent tiny-slider from adding those classes.

import { tns } from "tiny-slider/src/tiny-slider";

tns({ autoWidth: true })

But please make sure still works as expected in the latest browsers before committing to this.