Кнопка показывает несколько раз на сафари

Question

У меня есть кнопка внутри контейнера, которая работает, как и должно быть в современных браузерах (и даже IE11), но по какой-то причине повторяется и располагается в прокручиваемой выноске вверху (кнопка НЕ ​​расположена в выноске в кодесовсем).

Вот мой код:

.buttonContainer {
   position: fixed;
   width: 319px;
   height: 62px;
   background-color: #fff;
   display: inline-block;
   text-align: center;
   vertical-align: middle;
   margin-bottom: 10px;
   box-shadow: 0 0 2px 0 #d2d2d2;

}


.button {

    position: fixed;
    left: 39%;
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);

   .color {
       background-color: #ff0033;
       color: #ffffff;
       display: inline-block;
       height: 26px;
       width: 64px;
       margin-top:10%;
       padding: 8px 16px;
       font-size: 14px;
       cursor: pointer;
       text-align: center;
       vertical-align: middle;
       line-height: 28px;
   }
}

Над кнопкой будет повторяться несколько раз в прокручиваемом контейнере выноски над .В коде кнопка ни в чем не расположена.Только кнопка внутри контейнера кнопки.