Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #21 (permalink)  
Старый 21.08.2018, 22:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #22 (permalink)  
Старый 22.08.2018, 10:47
Профессор
Отправить личное сообщение для giwuf Посмотреть профиль Найти все сообщения от giwuf
 
Регистрация: 16.05.2017
Сообщений: 163

Сообщение от рони Посмотреть сообщение
вероятно у вас иное 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 показывается сразу, а лишь затем перекрывается увеличенной картинкой. Если указываю фон белый, то точно такой же артефакт, но уже с белым. Т.е. при наведении картинка как будто сразу исчезает и оставляет после себя занимаемое пустое фоновое место, а потом вдруг появляется увеличенной.

Сообщение от рони Посмотреть сообщение
giwuf,
код ниже, у вас в ie работает?
Да, рони, работает, вот только дрожит картинка при зумировании.
Ответить с цитированием
  #23 (permalink)  
Старый 22.08.2018, 11:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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


если здесь никакой фон не выскакивает, смотрите, что не так у вас.
всё что мог, смотрите выше.
и тут
Сообщение от Malleys
Если добавить /* костыль */ overflow: hidden; border-radius: .01px;
то в данном случае дрожание скрывается

codepen.io/anon/pen/OoPLrX
Ответить с цитированием
  #24 (permalink)  
Старый 22.08.2018, 12:32
Профессор
Отправить личное сообщение для giwuf Посмотреть профиль Найти все сообщения от giwuf
 
Регистрация: 16.05.2017
Сообщений: 163

Сообщение от рони Посмотреть сообщение


если здесь никакой фон не выскакивает, смотрите, что не так у вас.
всё что мог, смотрите выше.
и тут
рони, разобрался в причине - все дело в 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.
Можно ли это как-то поправить пока не знаю..
Ответить с цитированием
  #25 (permalink)  
Старый 22.08.2018, 12:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от giwuf
Можно ли это как-то поправить пока не знаю..
не понимаю вашей проблемы, если здесь у вас работает.
Ответить с цитированием
  #26 (permalink)  
Старый 22.08.2018, 14:32
Профессор
Отправить личное сообщение для giwuf Посмотреть профиль Найти все сообщения от giwuf
 
Регистрация: 16.05.2017
Сообщений: 163

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

посмотрите, пожалуйста, этот пример в каком-нить ie
https://jsbin.com/muqiwe/2/edit?html,css,output
и сравните с поведением в другом браузере.
При наведении на блоки (красный, синий) они плавно друг друга перекрывают с помощью transition, в ie же свойство transition не отрабатывает и переход получается резким. Аналогично и у меня: transition не отрабатывает и до тех пор пока не произойдет (это не мгновенно происходит)
Код:
transform: scale(1.25);
виден цвет подложки под картинкой
Ответить с цитированием
  #27 (permalink)  
Старый 22.08.2018, 16:55
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от giwuf
в ie же свойство transition не отрабатывает и переход получается резким.
понятно, как решить не знаю
Ответить с цитированием
  #28 (permalink)  
Старый 22.08.2018, 17:59
Профессор
Отправить личное сообщение для giwuf Посмотреть профиль Найти все сообщения от giwuf
 
Регистрация: 16.05.2017
Сообщений: 163

рони,

Все же я докопался до решения!
Оказывается, дело было в разных версия подключенной библиотеки стилей 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, слегка только подергивается в самом конце, но это не существенно - ориентир в первую очередь на основные браузеры.
Спасибо за помощь!
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Почему не работает передача через POST OklickSpb Общие вопросы Javascript 3 31.03.2012 01:43
ссылка с fadeIn работает через раз oblomov86 jQuery 1 24.03.2011 17:52
скрипт работает в IE через раз jsVAN Internet Explorer 2 10.03.2011 03:27
Регулярные выражения работают через раз San4ezy Общие вопросы Javascript 5 05.10.2010 01:50
Регулярка работает через раз. Andrej_2 Общие вопросы Javascript 17 17.05.2009 15:15