CSS转换不适用于Safari

Question

我创建了一个CSS转换，它减少了元素的宽度。在Chrome和Firefox中，这种方法很好，宽度将从250px减少到0，使用0.4s的过渡时间。

在Safari上，宽度立即减少到0.同一CSS类中的其他过渡工作正常，这就是为什么我很难理解这个问题。

以下示例网站:(徽标文字是滚动时减少为0的内容）。

http://mattstest03.businesscatalyst.com/index.html

相对于以下问题的代码：

<style>
    .smaller-text {
        width: 0;
        position: fixed !important;
        top: 7px;
        margin-top: -15px;
        transition: all 0.4s;
        -moz-transition: all 0.4s;
        -webkit-transition: all 0.4s;
    }
</style>
<script>
jQuery(document).ready(function() {

    jQuery(window).scroll(function() {
        var width = window.innerWidth;

        if (width > 1000 && jQuery(window).scrollTop() > (jQuery('div').offset().top - 10)) {
            jQuery('#logo-text').addClass('smaller-text');
        } else {
            jQuery('#logo-text').removeClass('smaller-text');
        }
    });
</script>

有人可以帮我理解这个问题吗？感谢您的帮助。