Miscalculation of Swiper parent width in IE11, unable to scroll to last slide

This is a (multiple allowed):

• bug

• enhancement

• feature-discussion (RFC)

• Swiper Version: 4.4.2

• Platform/Target and Browser Versions: IE11 (11.407.17134.0) Windows 10 Pro

• Live Link or JSFiddle/Codepen or website with issue: https://codepen.io/saltymouse/full/ZmMPxW/

What you did

In the above Codepen demo (Bootstrap layout similar to my original project), using the mouse to drag/swipe (from right to left) to go to the final slide in the grey, numbered (0,1,2…) tab-slides.

Expected Behavior

Be able to drag/swipe all the way right to the bring the final slide into view. All other modern browsers except IE11 perform as expected.

Actual Behavior

IE11 stops the drag process at about slide ‘16 sixteen’ unable to continue dragging to the final slide (‘23 isEnd’). Checking at the console, IE tells me that tabbyTop.isEnd // true even though it has stopped midway.

Interestingly, the bottom Swiper (with photos and articles) works as expected in IE11, dragging to the last slide. The two Swipers are connected only 1-way: tabbyBottom.controller.control = tabbyTop;

I tried setting the parent width to 100% as suggested in #1258, but had no effect on how IE makes its calculations.

[DKvistgaard]

I’ve noticed the same issue. I’ve boiled down the issue to being the calculation of the size of each slide when using box-sizing: border-box; and the slidesPerView: 'auto' (as you mention).

So I looked into the code at it seems to be that each slide size is calculated using getPropertyValue('width') and doesn’t add paddings (left and right) to the calculated width, if the slide has a box-sizing: border-box styling. That is a correct calculation for most browsers (as the width includes padding in these cases), but apparently IE doesn’t include the paddings in the width returned by getPropertyValue('width').

A quick fix is to change the box-sizing styling on the slide items.

I will see if I can possibly find some time to do a PR with a fix for this.

[saltymouse]

Apparently this is related to IE’s ability to (not) handle slidesPerView: 'auto'. I was able to work around this by conditionally setting a fixed number of slides for IE, but ‘auto’ for normal browsers. Perhaps this will help someone else until the bug is fixed.

var ieUser = /MSIE \d|Trident.*rv:/; // IE user agent regex
var tabbyTopSlidesPerView;

ieUser.test(navigator.userAgent)
  ? tabbyTopSlidesPerView = 4 // for IE
  : tabbyTopSlidesPerView = 'auto'; // for everyone else

var tabbyTop = new Swiper('.tabby-top.swiper-container', {
  loop: false,
  slidesPerView: tabbyTopSlidesPerView, // the conditional variable we set above
  freeMode: true,
  grabCursor: true,
  spaceBetween: 0,
  // ... other settings
});