jquery - bootstrap navbar collapses weirdly in safari -

i new @ field, forgive me if couldn't define problem properly. frankly not sure how describe uploaded video of problem. here is: https://youtu.be/w9dybqtqkhc

it's okay in chrome , firefox. use jquery plugin called "sticky" if matters.

edit: when set transition none problem disappears when use webkit etc. comes back. i'd still appreciate since wanna keep nice transitions :)

and here 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> 

and related 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> 

i don't know else should post in message, if there else please tell.

all appreciated, thanks.