Всем привет. Есть у меня каруселька с элементами. Все работает, отображается хорошо во всех браузерах за исключением сафари - там почему-то кнопки навигации скачут туда-сюда, т.е. изначально разбросаны в разные стороны, а при наведении начинают дергаться и состыковываться между собой. По субъективным ощущениям дело в позиционировании left: auto;
когда убираю - в сафари они состыковываются, но неправильно отображаются все равно..
$('#foot-carousel').owlCarousel({
items: 3,
pagination: false,
navigation: true,
navigationText: ["", ""],
});
#foot-carousel .owl-carousel {
opacity: 1;
position: relative;
}
.cart-carusel {
position: relative;
}
#foot-carousel .li {
position: relative;
float: left;
width: 280px;
background-color: #fff;
color: #5f636a;
padding: 9px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
position: relative;
margin-right: 3px;
}
#foot-carousel div a {
float: left;
margin-right: 10px;
}
#foot-carousel .cart-quantity a {
color: #292f38;
font-size: 0;
position: absolute;
top: 5px;
right: 5px;
}
#foot-carousel .product-name {
font-size: 14px;
font-weight: bold;
padding-right: 30px;
}
#foot-carousel .owl-pagination {
display: none!important;
}
.cart-carusel {
position: relative;
}
#foot-carousel .owl-buttons {
position: absolute;
top: 20px;
right: 0;
}
#foot-carousel .owl-prev,
#foot-carousel .owl-next {
display: inline-block;
border-width: 1px;
border-style: solid;
border-color: transparent;
background-color: #ecf0f1;
cursor: pointer;
width: 30px;
height: 30px;
text-align: center;
font-size: 0;
-webkit-border-radius: 4px;
border-radius: 4px;
-webkit-transition: all .3s aese;
transition: all .3s ease;
top: 0;
opacity: 1;
transform: none;
color: #fff;
}
#foot-carousel .owl-prev:hover,
#foot-carousel .owl-next:hover {
border-color: transparent;
background-color: #e74c3c;
color: #fff;
}
#foot-carousel .owl-prev:before,
#foot-carousel .owl-next:before {
line-height: 29px;
font-size: 18px;
color: #696e6e;
}
#foot-carousel .owl-prev:hover:before,
#foot-carousel .owl-next:hover:before {
color: #fff;
}
#foot-carousel .owl-prev {
left: auto;
right: 50px;
}
#foot-carousel .owl-next {
right: 15px;
}
<div id="foot-carousel" class="owl-carousel owl-theme" style="display: block; opacity: 1;">
<div class="owl-wrapper-outer">
<div class="owl-wrapper" style="width: 2520px; left: 0px; display: block; transition: all 0ms ease; transform: translate3d(0px, 0px, 0px);">
<div class="owl-item" style="width: 315px;">
<div class="li">
<a href="#">
<img width="60" height="60" src="#" class="attachment-60x60 wp-post-image" alt="item-3">
</a>
<div class="product-text">
<span class="sku">Product SKU N/A</span>
<span class="quantity">1 × <span class="amount">80.000 руб</span></span>
</div>
</div>
</div>
<div class="owl-item" style="width: 315px;">
<div class="li">
<a href="#">
<img width="60" height="60" src="#" class="attachment-60x60 wp-post-image" alt="item-3">
</a>
<div class="product-text">
<span class="sku">Product SKU N/A</span>
<span class="quantity">1 × <span class="amount">80.000 руб</span></span>
</div>
</div>
</div>
<div class="owl-item" style="width: 315px;">
<div class="li">
<a href="#">
<img width="60" height="60" src="#" class="attachment-60x60 wp-post-image" alt="item-3">
</a>
<div class="product-text">
<span class="sku">Product SKU N/A</span>
<span class="quantity">1 × <span class="amount">80.000 руб</span></span>
</div>
</div>
</div>
<div class="owl-item" style="width: 315px;">
<div class="li">
<a href="#">
<img width="60" height="60" src="#" class="attachment-60x60 wp-post-image" alt="item-3">
</a>
<div class="product-text">
<span class="sku">Product SKU N/A</span>
<span class="quantity">1 × <span class="amount">80.000 руб</span></span>
</div>
</div>
</div>
</div>
</div>
<div class="owl-controls clickable">
<div class="owl-buttons">
<div class="owl-prev"></div>
<div class="owl-next"></div>
</div>
</div>
</div>
media safari {}
– Вася 30 июл '15 в 13:48