Javascript-форум - Owl carousel загружается через раз

Javascript-форум (https://javascript.ru/forum/)

- Библиотеки/Тулкиты/Фреймворки (https://javascript.ru/forum/library-toolkit-framework/)

- - Owl carousel загружается через раз - почему? (https://javascript.ru/forum/library-toolkit-framework/74951-owl-carousel-zagruzhaetsya-cherez-raz-pochemu.html)

giwuf,
код ниже, у вас в ie работает?

<!DOCTYPE HTML>
<html>
<head>
    <meta name="viewport" content="width=device-width">
    <meta charset="utf-8">
    <style type="text/css">
.carousel:after, .carousel:before {
    content: "";
    display: block;
    height: 50px;
    background: #f1fff1;
}

.carousel:after {
    background: #fffff1;
}

.carousel .owl-stage-outer {
    padding: 32px 0;
    margin: -32px 0;
}

.carousel .owl-stage {
    display: flex;
}

.carousel .owl-item {
    -webkit-transition: .15s;
    transition: .15s;
    z-index: 0;
    flex: 1 0 auto;
    overflow: hidden;
    border-radius: .01px;
}

.carousel .owl-item:hover {
    -webkit-transition: .5s;
    transition: .5s;
    -webkit-transform: scale(1.23);
    transform: scale(1.23);
    z-index: 10;
    border-radius: 10px;
    box-shadow: 4px 4px 7px -1px rgba(173, 173, 173, 1.0);

}


.carousel .photo {
    display: block;
    overflow: hidden;
    height: 100%;
}

.carousel .photo img {
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    -webkit-transition: 1s;
    transition: 1s;
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
    animation: zoom 10s infinite linear;
    animation-play-state: paused;
}

.carousel .photo img:hover {
    animation-play-state: running;
}

@keyframes zoom {
    from, to, 90% {
        -webkit-filter: blur(0.1px);
        filter: blur(0.1px);
    }
    90% {
        -webkit-transform: scale(2);
        transform: scale(2);
    }

    91% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
}

    </style>
    <link href="https://cdn.rawgit.com/smashingboxes/OwlCarousel2/2.0.0-beta.3/dist/assets/owl.carousel.css" rel="stylesheet">
    <link href="https://cdn.rawgit.com/smashingboxes/OwlCarousel2/2.0.0-beta.3/dist/assets/owl.theme.default.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.rawgit.com/smashingboxes/OwlCarousel2/2.0.0-beta.3/dist/owl.carousel.js"></script>
    <script>
jQuery(window).on("load", function() {
        $("#photo-gallery").owlCarousel({
                loop: true,
                nav: false,
                dots: false,
                responsive: {
                          0: { items: 2 },
                        480: { items: 3 },
                        768: { items: 4 },
                        992: { items: 5 }
                }
        })
});
    </script>
</head>
<body>
    <section id="photo-gallery" class="carousel owl-carousel">
        <a class="photo"><img src="https://picsum.photos/300/190/?random&r=1" alt="photo-1"></a>
        <a class="photo"><img src="https://picsum.photos/304/184/?random&r=2" alt="photo-2"></a>
        <a class="photo"><img src="https://picsum.photos/305/189/?random&r=3" alt="photo-3"></a>
        <a class="photo"><img src="https://picsum.photos/304/189/?random&r=4" alt="photo-4"></a>
        <a class="photo"><img src="https://picsum.photos/305/190/?random&r=5" alt="photo-5"></a>
    </section>
</body>
</html>

Цитата:

Сообщение от рони (Сообщение 493160)

вероятно у вас иное css, или ошибки, чем варианты предлгаемые тут.
проверял в ie11, нет никаких проблем с scale(1.25)

jquery вероятно нужен ниже версии 2, замените на

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Да, спасибо, с ie10 разобрался - у меня оказывается, была подключена jquery 3 версии. Подсоединил 2ую и заменил все объявления переменных с let на var и карусель стала отображаться.
Стили у меня точно такие же.
Другое дело, что наведении на картинку, черный фон из этой инструкции:

Код:

.carousel .owl-stage {

    display: flex;

    background: black;

}

в ie10-11 показывается сразу, а лишь затем перекрывается увеличенной картинкой. Если указываю фон белый, то точно такой же артефакт, но уже с белым. Т.е. при наведении картинка как будто сразу исчезает и оставляет после себя занимаемое пустое фоновое место, а потом вдруг появляется увеличенной.

Цитата:

Сообщение от рони (Сообщение 493160)

giwuf,
код ниже, у вас в ie работает?

Да, рони, работает, вот только дрожит картинка при зумировании.

Цитата:

Сообщение от giwuf

черный фон из этой инструкции:в ie10-11 показывается сразу

Цитата:

Сообщение от giwuf

Да, рони, работает, вот только дрожит картинка при зумировании.

:-?

если здесь никакой фон не выскакивает, смотрите, что не так у вас.
всё что мог, смотрите выше.
и тут

Цитата:

Сообщение от Malleys

Если добавить /* костыль */ overflow: hidden; border-radius: .01px;
то в данном случае дрожание скрывается

codepen.io/anon/pen/OoPLrX

Цитата:

Сообщение от рони (Сообщение 493177)

:-?

если здесь никакой фон не выскакивает, смотрите, что не так у вас.
всё что мог, смотрите выше.
и тут

рони, разобрался в причине - все дело в transition на элементах. Если их убрать с исходного состояния и ховера, то увеличение получается резким, но без артефактов.
Все дело в том, что в ie10-11 и ранних edge не работают transition на флексах. Вот пример

Цитата:

In IE (10, 11, Edge) the CSS transition starts very close to the intended end state. If you're not looking closely it's like the transition is not happening at all. In the example linked to below one of the divs should slide in from the right but does not.

The issue occurs with some transition properties but not others. For example, I can't reproduce when transitioning on 'right' but can reproduce when transitioning on 'opacity' or 'transform'. Also, opacity and transform appear to work when animating an empty div, but not one with any content.

Можно ли это как-то поправить пока не знаю..

Цитата:

Сообщение от giwuf

Можно ли это как-то поправить пока не знаю..

не понимаю вашей проблемы, если здесь у вас работает.

Цитата:

Сообщение от рони (Сообщение 493183)

не понимаю вашей проблемы, если здесь у вас работает.

рони,

посмотрите, пожалуйста, этот пример в каком-нить ie
https://jsbin.com/muqiwe/2/edit?html,css,output
и сравните с поведением в другом браузере.
При наведении на блоки (красный, синий) они плавно друг друга перекрывают с помощью transition, в ie же свойство transition не отрабатывает и переход получается резким. Аналогично и у меня: transition не отрабатывает и до тех пор пока не произойдет (это не мгновенно происходит)

Код:

transform: scale(1.25);

виден цвет подложки под картинкой

Цитата:

Сообщение от giwuf

в ie же свойство transition не отрабатывает и переход получается резким.

понятно, как решить не знаю

рони,

Все же я докопался до решения!
Оказывается, дело было в разных версия подключенной библиотеки стилей owl carousel (у вас beta, а у меня 2.4) в которой для item были подключены такие стили:

.owl-carousel .owl-item, .owl-carousel .owl-wrapper {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
}

Прописал отдельным пунктом

.owl-carousel .owl-item, .owl-carousel .owl-wrapper { 
-ms-backface-visibility: inherit;
}

и задний фон ушел! Сейчас практически идеально увеличивает картинку для ie10-11, слегка только подергивается в самом конце, но это не существенно - ориентир в первую очередь на основные браузеры.
Спасибо за помощь!