У меня есть навигация, которая выглядит следующим образом:
<nav class="text-center">
<button class="btn nav-button color-house" type="button"><%= link_to "House", home_house_path, class: "color-house" %></button>
<button class="btn nav-button color-spouse" type="button"><%= link_to "Spouse", home_spouse_path, class: "color-spouse" %></button>
<button class="btn nav-button color-kids" type="button"><%= link_to "Kids", home_kids_path, class: "color-kids" %></button>
<button class="btn nav-button color-neutral" type="button"><%= link_to "Blog", blogs_path %></button>
</nav>
, которая прекрасно работает на компьютере: 
Но по какой-то странной причине имеетстранный серый фон на мобильном устройстве: 
Странно, если я попробую мобильный симулятор Chrome Inspector, он будет выглядеть совершенно нормально ... Изображение появляется только принежелательный серый на реальном телефоне.
Ссылка на сайт heroku здесь на случай, если вы захотите увидеть реальную вещь.
Я чувствую, что это должно бытьчто-то вроде Bootstrap 4, так как я никогда не сталкивался с таким поведением на сайте без него.
Я пробовал background-color: white !important на btn и nav-button, но безрезультатно.Единственный пользовательский CSS, который у меня сейчас есть, это:
$color-house: #84C99A;
$color-spouse: #313E50;
$color-kids: #EFB0A1;
$color-neutral: #B7AD99;
$color-black: #26010C;
.color-house { color: $color-house; }
.color-spouse { color: $color-spouse; }
.color-kids { color: $color-kids; }
.color-neutral { color: $color-neutral; }
.color-neutral-hover:hover { color: $color-black; }
.nav-button a {
font-family: $font-script;
display: inline-block;
font-size: 30px;
padding-top: 10px;
margin: 10px 10px 20px 10px;
border-top: solid thin white;
border-top: solid thin white;
}
@media screen and (max-width: 800px) {
.nav-button a {
margin: 10px 5px 30px 5px;
font-size: 25px;
}
}