Extra Offset in Microsoft Edge

megalofauna commented 6 years ago

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!

matt-sonata commented 6 years ago

Also having this issue with 2.8.6 and Edge

nternetinspired commented 6 years ago

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 commented 6 years ago

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

matt-sonata commented 6 years ago

Temporary workaround is to use version 2.7.4

ganlanyuan commented 6 years ago

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 commented 5 years ago

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

ganlanyuan commented 5 years ago

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

de3web commented 5 years ago

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 commented 5 years ago

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

matt-sonata commented 5 years ago

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

TwR-Slice commented 5 years ago

@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 commented 5 years ago

@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 commented 5 years ago

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 commented 4 years ago

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.

ganlanyuan / tiny-slider

Extra Offset in Microsoft Edge #275