SlickJS在Safari上显示问题，而不是Chrome

Question

我有一个使用SlickJS（http://kenwheeler.github.io/slick/）的页面，您可以在此处访问： http://kitkittlegallery.com/category/organic-forms

在Chrome中显示如下：

如果您在Safari中访问它，它的显示和功能将被破坏。

我觉得问题是由于我自己的一些CSS与Slick的CSS或JS冲突。这是用于这个浮油的JS：

$(document).ready(function(){ 


$('.slick-view').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    speed: 500,
    draggable: false, 
    asNavFor: '.slick-nav',
    dots: false,
    centerMode: true,
    focusOnSelect: true,
    variableWidth: true, 
    autoplay: true, 
    autoplaySpeed: 5000,
    infinite: true, 
    arrows: false, 
});
$('.slick-nav').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    speed: 500,
    draggable: false, 
    asNavFor: '.slick-view',
    dots: false,
    centerMode: true,
    focusOnSelect: true,
    variableWidth: true, 
    autoplay: true, 
    autoplaySpeed: 5000,
    infinite: true, 
    arrows: false, 
});
}); 

CSS：

 #slick *{ 
    transition: all .5s ease; 
    -webkit-transition: all .5s ease; 
} 
#slick{
    width: 100%; 
    overflow: hidden;
}
.slick-view .slick-active{ 
    opacity: 1; 
} 
.slick-view .slick-slide:not(.slick-active){ 
    opacity: 0; 
} 
.slick-slide{ 
    cursor: pointer; 
} 
.viewer{ 
    width: 600px; 
    overflow: hidden; 
    margin: 1em auto; 
} 
.slick-view .slick-track img{ 
    max-height: 600px; 
    margin: 0em .5em;
    vertical-align: middle; 
} 
.viewer .slick-track img{ 
    max-height: 75px; 
    margin: 0em .5em; 
    opacity: .7; 
} 
.viewer .slick-track img.slick-active{ 
    opacity: 1 !important; 
} 
@media(max-width: 770px){ 
    .viewer{ 
        width: 100%; 
    } 
    .slick-view .slick-track img{ 
        max-height: 400px; 
    } 
} 
@media(max-width: 400px){ 
    .slick-view .slick-track img{ 
        max-height: 300px; 
    } 
} 

任何可能导致冲突的事情的红旗？

提前致谢！