Кнопка CSS не отображается на iPhone, но появляется везде

Question

Я создал целевую страницу с 2 синими кнопками и 2 белыми кнопками.Одна из белых кнопок не отображается на iPhone (я пробовал на 6, 8 и X), но обычно отображается на Android и на рабочем столе (как Windows, так и Mac).Сам текст есть, и вы можете нажать на него, но белая кнопка - нет.Другая белая кнопка имеет тот же CSS и отображается, поэтому я не совсем уверен, почему эта кнопка отсутствует.

Я попытался добавить идентификатор и присвоить ему -webkit-appearance: none;, но он все ещене имеет большого значения.

<button class="btn-white" id="bwt" onclick="window.location.href ='#';">BUTTON TEXT</button>

.btn-white {
  padding: 10px;
  border-radius: 6px;
}

.btn-white:hover {
  background-color: #0F0F54;
  border: thin solid #F5F5F5;
  color: #F5F5F5;
  cursor: pointer;
}

#bwt {
  margin: 0 auto;
  display: block;
  -webkit-appearance: none;
}

А вот родитель div:

#blue-f {
  background-color: rgba(16,15,84,1.00);
  height: 100%;
  overflow: hidden;
  background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,0.54) 0%,rgba(0,0,0,0.54) 100%);
  background-image: -moz-linear-gradient(270deg,rgba(0,0,0,0.54) 0%,rgba(0,0,0,0.54) 100%);
  background-image: -o-linear-gradient(270deg,rgba(0,0,0,0.54) 0%,rgba(0,0,0,0.54) 100%);
  background-image: linear-gradient(180deg,rgba(0,0,0,0.54) 0%,rgba(0,0,0,0.54) 100%);
  padding: 75px 0px 75px 0px;
}

Я не знаю, скрывает ли родитель div как-токнопку, но я думаю, что это все равно не объяснит, почему все работает на других мобильных телефонах / настольных компьютерах.