bootstrap navbar在safari中奇怪地崩溃

Question

我在这个领域很新，所以请原谅我，如果我无法正确定义问题。坦率地说，我不知道如何描述它所以我上传了一个问题的视频。所以这是：https://youtu.be/w9dyBqTQKhc

Chrome和Firefox都可以。我还使用了一个名为＆＃34; sticky＆＃34;的jquery插件。如果重要的话。

编辑：当我将转换设置为无问题时，问题就会消失，但即使我使用webkit等，它也会回来。我仍然很感激帮助，因为我想保持良好的过渡：）

这是html：

    <nav class="navbar navbar-default" id="sticker">
        <div class = container> 
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse ">
                    <span class="sr-only">Toggle nav</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button> 
                <div class="active">
                <a class="navbar-brand" href="#"><h1>reflections</h1></a>
                </div>
            </div><!--navbar-header-->
        </div>
        <div class="collapse navbar-collapse" id="collapse">
            <ul class="nav navbar-nav pull-right">
                <li role="presentation"><a href="#project">DESCRIPTION</a>
                </li>
                <li role="presentation"><a href="#team">PHOTOS</a> 
                </li>
                <li role="presentation"><a href="#contact">CONTACT US</a>
                </li>
                <li role="presentation"><a href="#location">OUR LOCATION</a>
                </li>
            </ul>
        </div><!---navbar-collapse--->
    </nav>

相关的css：

<style>
.navbar-default {
border:none;
background-color: transparent;
}
.navbar-default .navbar-nav>li>a:hover {
color:#20D1FF;
}
.navbar-default .navbar-nav>li>a{
color:#10687F;
}
.is-sticky .navbar-default .navbar-nav>li>a{
color:#1AA7CC;
font-weight: 600;
}
.is-sticky .navbar-default .navbar-nav>li>a:hover {
color:#20D1FF;
}
nav ul li a{
color: white;
font-weight: bold;
font-weight: 500;
}
nav ul li {
border-left: 1px solid #000000;
}
#sticker {
background-color: rgba(255, 255, 255, 255);
z-index: 1000;
transition: 0.4s;
height: auto;
    max-height: 50px;
transition: none;
}
.is-sticky #sticker {
background-color: rgba(0, 0, 0, 1);
transition: 2s;
max-height: 50px;
transition: none;

}
#sticker li.active a{
background-color: white;
color: #10687F;
font-weight: bolder;
text-shadow: none;
}
header .navbar-brand {
background-position: 0 0;
height: auto;
position: absolute;
margin-top: -10px;
}
header .navbar-brand h1{
color: black;
margin: 0;
font-size:1.8em;
font-weight: 400;
padding-left: 20px;
}
.is-sticky .navbar-brand h1{
color:white;
}
</style>

我不知道我应该在邮件中发布什么，如果有什么请告诉我。

感谢所有帮助，谢谢。