21.08.2018, 22:54
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,127
|
|
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.08.2018, 10:47
|
|
Профессор
|
|
Регистрация: 16.05.2017
Сообщений: 167
|
|
Сообщение от рони
|
вероятно у вас иное 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 работает?
|
Да, рони, работает, вот только дрожит картинка при зумировании.
|
|
22.08.2018, 11:33
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,127
|
|
|
Сообщение от giwuf
|
|
черный фон из этой инструкции:в ie10-11 показывается сразу
|
|
Сообщение от giwuf
|
|
Да, рони, работает, вот только дрожит картинка при зумировании.
|
если здесь никакой фон не выскакивает, смотрите, что не так у вас.
всё что мог, смотрите выше.
и тут
|
Сообщение от Malleys
|
Если добавить /* костыль */ overflow: hidden; border-radius: .01px;
то в данном случае дрожание скрывается
codepen.io/anon/pen/OoPLrX
|
|
|
22.08.2018, 12:32
|
|
Профессор
|
|
Регистрация: 16.05.2017
Сообщений: 167
|
|
|
Сообщение от рони
|
если здесь никакой фон не выскакивает, смотрите, что не так у вас.
всё что мог, смотрите выше.
и тут
|
рони, разобрался в причине - все дело в 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.
|
Можно ли это как-то поправить пока не знаю.. |
|
22.08.2018, 12:39
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,127
|
|
|
Сообщение от giwuf
|
|
Можно ли это как-то поправить пока не знаю..
|
не понимаю вашей проблемы, если здесь у вас работает. |
|
22.08.2018, 14:32
|
|
Профессор
|
|
Регистрация: 16.05.2017
Сообщений: 167
|
|
|
Сообщение от рони
|
|
не понимаю вашей проблемы, если здесь у вас работает.
|
рони,
посмотрите, пожалуйста, этот пример в каком-нить ie
https://jsbin.com/muqiwe/2/edit?html,css,output
и сравните с поведением в другом браузере.
При наведении на блоки (красный, синий) они плавно друг друга перекрывают с помощью transition, в ie же свойство transition не отрабатывает и переход получается резким. Аналогично и у меня: transition не отрабатывает и до тех пор пока не произойдет (это не мгновенно происходит)
|
Код:
|
transform: scale(1.25); |
виден цвет подложки под картинкой |
|
22.08.2018, 16:55
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,127
|
|
|
Сообщение от giwuf
|
|
в ie же свойство transition не отрабатывает и переход получается резким.
|
понятно, как решить не знаю |
|
22.08.2018, 17:59
|
|
Профессор
|
|
Регистрация: 16.05.2017
Сообщений: 167
|
|
рони,
Все же я докопался до решения!
Оказывается, дело было в разных версия подключенной библиотеки стилей 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, слегка только подергивается в самом конце, но это не существенно - ориентир в первую очередь на основные браузеры.
Спасибо за помощь!
|
|
|
|
