Добавление отступы по-разному работает в Chrome и Firefox, чем в Safari

Question

Что я творю

На моем сайте, панель навигации не запускается в верхней части страницы, а это немного путь вниз страницы под заголовком/баннером. Когда пользователь прокручивается мимо навигационной панели, я меняю позицию на фиксированную, чтобы она теперь находилась в верхней части страницы, когда она просматривает остальную часть содержимого.

Я хочу, чтобы это выглядело действительно бесшовно, поэтому, когда navbar становится фиксированным, я добавляю некоторое дополнение к основному контенту, чтобы он не прыгал в пространство, где находился навигатор. Я делаю все это в своем javascript, используя jQuery для добавления стилей классов и стилей к определенным элементам.

---

Проблема

В Safari, мой код работает отлично! Проблема у меня в том, что в Chrome и Firefox кажется, что мне нужно добавить больше дополнений, чем в Safari. В Chrome и Firefox контент по-прежнему немного подпрыгивает после того, как навигационная панель становится фиксированной. Пробовав разные значения, я обнаружил, что в этих браузерах мне нужно ровно 20 дополнительных дополнений, чтобы сделать переход бесшовным, но потом контент вскакивает слишком далеко на Safari!

Почему это дополнительное дополнение требуется для некоторых браузеров, но не для Safari?

Если кто-то может помочь, я был бы искренне благодарен, потому что это действительно меня беспокоит! Я понятия не имею, почему это происходит по-разному в разных браузерах.

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

----- EDIT -----

ОК я обнаружил, что элемент, который является причиной проблемы является мой .navbar-button, который я не включил в моем оригинальном фрагменте кода. Я добавил его сейчас. Это то, что ведет себя по-разному в разных браузерах.

Мне пришлось добавить маржу к этому элементу, потому что он не правильно позиционировался в Chrome или Firefox без него, тогда как в Safari он был расположен как раз отлично.

Этот дополнительный запас является тем, что вызывает проблему.

$(document).ready(function() { 
 

 
    var $navBar = $(".navbar"); 
 

 
    $(window).scroll(handleScroll); 
 

 
    function handleScroll() { 
 
    fixNavbarToTopIfNecessary(); 
 
    } 
 

 
    function fixNavbarToTopIfNecessary() { 
 
    var bannerHeight = $("#banner").outerHeight(); 
 

 
    //When user scrolled past the initial position of the navbar 
 
    if ($(window).scrollTop() > bannerHeight) { 
 

 
     $navBar.addClass("navbar-fixed"); 
 
     $("#content").css("padding-top", $navBar.outerHeight() + "px"); // So that the content doesn't jump underneath the fixed nav. 
 
    } else { 
 
     $navBar.removeClass("navbar-fixed"); 
 
     $("#content").removeAttr("style"); 
 
    } 
 
    } 
 
});

* { 
 
    box-sizing: border-box; 
 
} 
 
html { 
 
    font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; 
 
    font-weight: normal; 
 
    color: #888; 
 
    -webkit-text-size-adjust: 100%; 
 
    /* Prevent font scaling in landscape while allowing user zoom */ 
 
} 
 
body { 
 
    line-height: 1.5; 
 
    font-size: 14px; 
 
} 
 
html, 
 
body, 
 
h1, 
 
h2, 
 
h3, 
 
h4, 
 
h5, 
 
h6, 
 
ul, 
 
p, 
 
img { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-weight: normal; 
 
} 
 
button { 
 
    border: none; 
 
    cursor: pointer; 
 
} 
 
.row::before, 
 
.row::after { 
 
    display: table; 
 
    content: " "; 
 
} 
 
.row::after { 
 
    clear: both; 
 
} 
 
.row { 
 
    margin-left: -15px; 
 
    margin-right: -15px; 
 
} 
 
.column { 
 
    display: block; 
 
    float: left; 
 
    min-height: 1px; 
 
    padding-left: 15px; 
 
    padding-right: 15px; 
 
} 
 
.s12 { 
 
    width: 100%; 
 
} 
 
p { 
 
    margin-top: 10px; 
 
    margin-bottom: 20px; 
 
} 
 
a { 
 
    text-decoration: none; 
 
    color: inherit; 
 
} 
 
section { 
 
    padding: 50px 0; 
 
} 
 
.container { 
 
    width: 970px; 
 
} 
 
#banner { 
 
    background-color: #794f29; 
 
    width: 100%; 
 
    height: 600px; 
 
    padding: 150px 0; 
 
    position: relative; 
 
    text-align: center; 
 
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); 
 
} 
 
.banner-intro { 
 
    width: 50%; 
 
    float: right; 
 
    right: 5%; 
 
    top: 50%; 
 
    margin: 0 auto; 
 
    position: relative; 
 
    transform: translateY(-50%); 
 
} 
 
.banner-intro-heading { 
 
    color: white; 
 
    font-size: 60px; 
 
    text-shadow: 0 0 5px #ffecb0; 
 
    margin-bottom: 10px; 
 
} 
 
.banner-intro-lead { 
 
    color: white; 
 
    font-size: 24px; 
 
} 
 
.btn { 
 
    background-color: #a16fff; 
 
    border: 1px solid #8748ff; 
 
    color: #fff; 
 
    display: inline-block; 
 
    border-radius: 5px; 
 
    padding: 15px 30px; 
 
    font-size: 16px; 
 
    font-weight: 500; 
 
    letter-spacing: 1px; 
 
    text-align: center; 
 
    overflow: hidden; 
 
    transition: .3s; 
 
    cursor: pointer; 
 
} 
 
.btn:hover { 
 
    background-color: #a16fff; 
 
    color: white; 
 
    border-color: #8748ff; 
 
} 
 
.banner-intro-button { 
 
    margin-top: 30px; 
 
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); 
 
    box-shadow: -2px 3px 10px rgba(0, 0, 0, 0.3); 
 
} 
 
.navbar { 
 
    -webkit-font-smoothing: subpixel-antialiased; 
 
    /* this stopped the font weight from changing when the navbar is fixed */ 
 
    width: 100%; 
 
    height: 60px; 
 
    background: rgba(255, 236, 176, 0.97); 
 
    line-height: 60px; 
 
    display: block; 
 
    position: relative; 
 
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); 
 
    z-index: 99; 
 
    transform: translateZ(0); 
 
    /* hack to make sure the navbar is repainted when it's set to a fixed-navbar on iOS */ 
 
} 
 
.navbar-fixed { 
 
    position: fixed; 
 
    top: 0; 
 
} 
 
.navbar-brand { 
 
    font-family: "Merienda", cursive; 
 
    display: inline-block; 
 
    padding: 0 15px; 
 
    font-size: 18px; 
 
    float: left; 
 
} 
 
.navbar-items { 
 
    float: right; 
 
} 
 
nav ul { 
 
    list-style: none; 
 
    text-align: center; 
 
} 
 
nav li { 
 
    display: block; 
 
    float: left; 
 
} 
 
nav a { 
 
    position: relative; 
 
    display: block; 
 
    font-size: 16px; 
 
    font-weight: 500; 
 
    color: #794f29; 
 
    transition: .3s; 
 
    padding: 0 25px; 
 
} 
 
.navbar-button { 
 
    background-color: #a16fff; 
 
    border-color: #8748ff; 
 
    padding: 8px 10px; 
 
    margin: 10px 15px; 
 
    line-height: normal; 
 
    box-shadow: -2px 3px 7px rgba(0, 0, 0, 0.2); 
 
} 
 
.featured { 
 
    text-align: center; 
 
} 
 
.featured-title { 
 
    font-size: 40px; 
 
    margin-bottom: 1.5rem; 
 
    color: #ccaa8c; 
 
} 
 
.featured-subtitle { 
 
    font-size: 22px; 
 
    margin-bottom: 1.5rem; 
 
    color: #666; 
 
} 
 
.featured .lead { 
 
    line-height: 2; 
 
    font-size: 16px; 
 
    margin-bottom: 40px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header> 
 

 
    <section id="banner"> 
 
    <div class="banner-intro"> 
 
     <h1 class="banner-intro-heading">Grand Title!</h1> 
 
     <p class="banner-intro-lead">Lorem ipsum lorum ipsum sausage rat cake mammoth hair.</p> 
 
     <a class="btn banner-intro-button" href="#">Call to Action</a> 
 
    </div> 
 
    </section> 
 

 
    <nav class="navbar"> <!-- This is what I add the navbar-fixed class to --> 
 
    <div class="container"> 
 
     <a href="#" class="navbar-brand">Brand</a> 
 
     <div class="navbar-items"> 
 
     <ul> 
 
      <li><a href="#">Link1</a> 
 
      </li> 
 
      <li><a href="#">Link2</a> 
 
      </li> 
 
      <li><a href="#">Link3</a> 
 
      </li> 
 
      <li><a href="#">Link4</a> 
 
      
 
       <li><a class="btn navbar-button" href="#">Button</a></li> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </nav> 
 

 
</header> 
 

 
<main id="content"> <!-- This is what I add the padding to --> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="column s12"> 
 
     <section class="featured"> 
 
      <h2 class="featured-title">Featured Title</h2> 
 
      <h3 class="featured-subtitle">Featured Subtitle</h3> 
 
      <p class="lead">Lots of info about said feature that rambles on forever and forever.</p> 
 
      <p class="lead">Even more info blablablablalblablabla.</p> 
 
     </section> 
 

 
     </div> 
 
     <div class="column s12"> 
 
     <section class="featured"> 
 
      <h2 class="featured-title">Featured Title</h2> 
 
      <h3 class="featured-subtitle">Featured Subtitle</h3> 
 
      <p class="lead">Lots of info about said feature that rambles on forever and forever.</p> 
 
      <p class="lead">Even more info blablablablalblablabla.</p> 
 
     </section> 
 
     </div> 
 
     <div class="column s12"> 
 
     <section class="featured"> 
 
      <h2 class="featured-title">Featured Title</h2> 
 
      <h3 class="featured-subtitle">Featured Subtitle</h3> 
 
      <p class="lead">Lots of info about said feature that rambles on forever and forever.</p> 
 
      <p class="lead">Even more info blablablablalblablabla.</p> 
 
     </section> 
 
     </div> 
 
     <div class="column s12"> 
 
     <section class="featured"> 
 
      <h2 class="featured-title">Featured Title</h2> 
 
      <h3 class="featured-subtitle">Featured Subtitle</h3> 
 
      <p class="lead">Lots of info about said feature that rambles on forever and forever.</p> 
 
      <p class="lead">Even more info blablablablalblablabla.</p> 
 
     </section> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</main>

Answer 1

Я нашел два решения для вашей задачи (использовать каждый из них достаточно).

Метод 1) Изменение margin-top и margin-bottom из .navbar-button в 0 (для предотвращения вертикальной маржу рушится ...), А также использовать для vertical-align: middle; центра вертикально:

.navbar-button { 
    background-color: #a16fff; 
    border-color: #8748ff; 
    padding: 8px 10px; 
    margin: 0 15px; /* *** margin top & bottom are changed to zero! */ 
    vertical-align: middle; /* *** this is new! */ 
    line-height: normal; 
    box-shadow: -2px 3px 7px rgba(0, 0, 0, 0.2); 
} 

---

Метод 2) удалить display: inline-block из .btn класса:

.btn { 
    background-color: #a16fff; 
    border: 1px solid #8748ff; 
    color: #fff; 
    /* display: inline-block; */ /* *** this is removed! */ 
    ... 
} 

, очевидно, что если вы не хотите, чтобы изменить по умолчанию .btn, вы можете добавить display: block в свою навигационную кнопку вручную как встроенный стиль (style="display: block;") или используя новый класс css (например: .block) f или он.

<li> 
    <a class="btn navbar-button" href="#" style="display: block;">Button</a> 
</li>