Карусель MVC не работает в IE11

Question

Прошу прощения, если это дубликат, но я нахожусь в конце своего ума, пытаясь выяснить, где я иду не так, и мог бы действительно использовать свежую пару глаз. Я создаю приложение MVC, и у меня в теге есть трехмерная карусель, предназначенная для поворота и отображения серии изображений. Он подключен к моему коду и отлично работает в Chrome, Edge и Firefox - пока все хорошо. У меня проблема с IE11 - карусель просто отображается как плоское изображение, которое вращается вокруг экрана в фиксированной точке, а не (как в Chrome и т. Д.), Действуя как серия изображений, которые вращаются вокруг при перемещении пользователя вперед или назад.

По мнению, у меня есть это:

<div class="rowX rowImage">
    <div class="col-xs-12"  style="background-color:#54cbec;">
        <div class="container">
            <div class="row padding-bottom5px">
                <div class="col-xs-12 padding-top40px padding-bottom50px carousel" data-gap="60">
                    <figure style="float:right; width:90%;">
                        <img src="https://source.unsplash.com/VkwRmha1_tI/800x533" alt="A" />
                        <img src="https://source.unsplash.com/EbuaKnSm8Zw/800x533" alt="" />
                        <img src="https://source.unsplash.com/kG38b7CFzTY/800x533" alt="" />
                        <img src="https://source.unsplash.com/nvzvOPQW0gc/800x533" alt="" />
                        <img src="https://source.unsplash.com/mCg0ZgD7BgU/800x533" alt="" />
                        <img src="https://source.unsplash.com/mCg0ZgD7BgU/800x533" alt="" />
                    </figure>
                    <nav>
                        <button class="nav prev">Prev</button>
                        <button class="nav next">Next</button>
                    </nav>
                </div>
            </div>
        </div>
    </div> 

Это обусловлено файлом JavaScript, который выглядит следующим образом:

if (document.addEventListener) {
    //window.addEventListener('load', () => {
        var carousels = document.querySelectorAll('.carousel');

        for (var i = 0; i < carousels.length; i++) {
            //console.log(":" + carousels[i]);
            carousel(carousels[i]);
        }
    //});
}
$(function () {
    var carousels = document.querySelectorAll('.carousel');

    for (var i = 0; i < carousels.length; i++) {
        //console.log(":" + carousels[i]);
        carousel(carousels[i]);
    }
});

function carousel(root) {
    var
        figure = root.querySelector('figure'),
        nav = root.querySelector('nav'),
        images = figure.children,
        n = images.length,
        gap = root.dataset.gap || 0,
        bfc = 'bfc' in root.dataset,

        theta = 2 * Math.PI / n,
        currImage = 0
    ;

    setupCarousel(n, parseFloat(getComputedStyle(images[0]).width));
    $(window).on('resize', function () {
        setupCarousel(n, parseFloat(getComputedStyle(images[0]).width));
    });
    //window.addEventListener('resize', () => {
    //    setupCarousel(n, parseFloat(getComputedStyle(images[0]).width))
    //});

    setupNavigation();

    function setupCarousel(n, s) {
        var
            apothem = s / (2 * Math.tan(Math.PI / n))
        ;

        //figure.style.transformOrigin = `50% 50% ${-apothem}px`;
        figure.style.transformOrigin = '50% 50% ' + -apothem + 'px';

        for (var i = 0; i < n; i++)
            //images[i].style.padding = `${gap}px`;
            images[i].style.padding = gap + 'px';
        for (i = 1; i < n; i++) {
            //images[i].style.transformOrigin = `50% 50% ${-apothem}px`;
            //images[i].style.transform = `rotateY(${i * theta}rad)`;
            images[i].style.transformOrigin = '50% 50% ' + -apothem + 'px';
            images[i].style.transform = 'rotateY(' + i * theta + 'rad)';
        }
        if (bfc)
            for (i = 0; i < n; i++)
                images[i].style.backfaceVisibility = 'hidden';

        rotateCarousel(currImage);
    }

    function setupNavigation() {
        nav.addEventListener('click', onClick, true);

        function onClick(e) {
            e.stopPropagation();

            var t = e.target;
            if (t.tagName.toUpperCase() != 'BUTTON')
                return;

            if (t.classList.contains('next')) {
                currImage++;
            }
            else {
                currImage--;
            }

            rotateCarousel(currImage);
        }

    }

    function rotateCarousel(imageIndex) {
        //figure.style.transform = `rotateY(${imageIndex * -theta}rad)`;
        figure.style.transform = 'rotateY(' + imageIndex * theta + 'rad)';
    }

}

Файл CSS:

.container {
    width: 100%;
    max-width: 1200px;
}


.container.tbl {
    width: 100%;
}

.container.tbl .td.col-dummy-spacer{
    border-style: solid;
    border-width: 0px 30px 0px 0px;
}

@media only screen and (max-width: 767px){ 
    .container.tbl.tbl-collapse-xs>.tr>.td {
        display: inline-block;
    }
    .container.tbl .td.col-dummy-spacer {
        border-width: 0px 0px 15px 0px;
    }
}

.padding-bottom5px{ padding-bottom: 5px; }
.padding-top40px{ padding-top: 40px; }
.padding-bottom50px{ padding-bottom: 50px; }

.carousel {
    padding: 20px;
    -webkit-perspective: 500px;
    perspective: 500px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.carousel > * {
  flex: 0 0 auto;
}

.carousel figure {
    margin: 0;
    width: 70%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    transition: transform 0.5s, -webkit-transform 0.5s;
}

.carousel figure img {
    width: 100%;
    box-sizing: border-box;
    padding: 0 0px;
}

.carousel figure img:not(:first-of-type) {
    position: absolute;
    left: 0;
    top: 0;
}

.carousel nav {
  display: flex;
  justify-content: center;
  margin: 20px 0 0;
}

.carousel nav button {
  flex: 0 0 auto;
  margin: 0 5px;
  cursor: pointer;
  color: #333;
  background: none;
  border: 1px solid;
  letter-spacing: 1px;
  padding: 5px 10px;
}

@media only screen and (max-width: 991px) {
    .navBtn {
        display: none !important;
    }
    .navLinks {
        font-size:16px;
    }
}

Я все еще новичок в MVC, и это сводит меня с ума (хотя, если честно, у меня, скорее всего, не будет такой же проблемы в веб-формах - кровавый IE). Я не могу обещать выигрышные номера лотереи в пятницу, но если вы можете помочь, у вас будет моя вечная преданность жизни ...

Answer 1

Убедитесь, что вы добавляете префиксы поставщиков в свой Javascript.

`

function getSupportedPropertyName(properties) {
    for (var i = 0; i < properties.length; i++) {
        if (typeof document.body.style[properties[i]] != "undefined") {
            return properties[i];
        }
    }
    return null;
}

var transform = ["transform", "msTransform", "webkitTransform", "mozTransform", "oTransform"]; 
var item = document.querySelector("#theItem");
var transformProperty = getSupportedPropertyName(transform); 
if (transformProperty) {
    item.style[transformProperty] = "rotate(45deg)";
}

`