Navbar elements appear different in Firefox and Chrome

Question

Navbar elements appear different in Firefox and Chrome. I use span tag to animate hamburger menu but it looks totally different in Firefox. It looks fine in Chrome and other browsers including Android. I tried browser reset CSS also. I don't know what I'm missing.

comparison of firefox and chrome. menu offset in firefox

see this jsfiddle example in firefox

html, body, div, span, h1, p, a, address, img, i, ul, li, footer, header, nav, section {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
footer, header, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ul {
  list-style: none;
}

a, a:hover {
  text-decoration: none;
}

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

/*----- reset end-----------*/
.header {
  background-color: #333;
  width: 100%;
  transition: .8s;
}
.header nav {
  width: 100%;
  margin: 0 auto;
  position: sticky;
  height: 100vh;
  top: 16px;
}
.header nav .btn {
  outline: none;
  border: none;
  display: block;
  cursor: pointer;
  background-color: #fff;
  width: 2.5rem;
  height: 2.5rem;
  margin: 16px;
}
.header nav .btn span {
  background-color: #FD5B4E;
  width: 95%;
  height: 0.1875rem;
  position: relative;
  display: block;
  margin: auto;
  top: 50%;
  transition: background-color .5s .3s;
}
.header nav .btn span:before {
  content: '';
  background-color: #FD5B4E;
  width: 100%;
  height: 0.1875rem;
  display: block;
  top: -0.625rem;
  position: absolute;
  transition: top .3s .4s,transform .3s;
}
.header nav .btn span:after {
  content: '';
  background-color: #FD5B4E;
  width: 100%;
  height: 0.1875rem;
  display: block;
  position: absolute;
  transition: top .3s .4s,transform .3s;
  top: 0.625rem;
}

<body>
    <header id="header" class="header sidbar">

        <nav>
            <button class="btn"><span></span></button>

        </nav>
    </header>
    <!-- /header -->


</body>

@FluffyKitten no purticular reason. i writen in scss so i pasted it . — Vigneshwar kumar, Oct 21 '17 at 15:49
I was wondering because another user here once was including the SCSS in their page instead of the CSS (they had some plugin in their Firefox that interpreted the SCSS directly) - as I was wondering if this was a similar case & the SCSS wasn't interpreted correctly :) Now that you've including the CSS, this helps because now we can actually try it for ourselves. I'll take a look — FluffyKitten, Oct 21 '17 at 15:52

FluffyKitten · Accepted Answer · 2017-10-22T19:36:09.410

The problem is with the top:50% in your CSS for the span. Its not doing anything on Chrome, but in FF its making the span move down 50% further than its default position (which is actually the middle already because you are using a button).

You just need to change this class:

.header nav .btn span {
  background-color: #FD5B4E;
  width: 95%;
  height: 0.1875rem;
  position: relative;
  display: block;
  margin: auto;
  /* top: 50%;  <- remove this and it works!  */
  transition: background-color .5s .3s;
}

If you used a div instead of a button you'd need to account for placing the span in the center, but the button element it is automatically centering the content vertically. By specifying that you want the top at 50%, FF is adding the 50% on to the current centred position.

Working example when you remove top:

Fiddle: https://jsfiddle.net/dt17u5uz/2/ or Snippet:

html, body, div, span, h1, p, a, address, img, i, ul, li, footer, header, nav, section {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
footer, header, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ul {
  list-style: none;
}

a, a:hover {
  text-decoration: none;
}

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

/*----- reset end-----------*/
/* autoprefixer: off */
/* autoprefixer: off */
.header {
  background-color: #333;
  width: 100%;
  transition: .8s;
}
.header nav {
  width: 100%;
  margin: 0 auto;
  position: sticky;
  height: 100vh;
  top: 16px;
}
.header nav .btn {
  outline: none;
  border: none;
  display: block;
  cursor: pointer;
  background-color: #fff;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 16px 16px;
}
.header nav .btn span {
  background-color: #FD5B4E;
  width: 95%;
  height: 0.1875rem;
  position: relative;
  display: block;
  margin: auto;
  top: 0;
  transition: background-color .5s .3s;
}
.header nav .btn span:before {
  content: '';
  background-color: #FD5B4E;
  width: 100%;
  height: 0.1875rem;
  display: block;
  top: -0.625rem;
  position: absolute;
  transition: top .3s .4s,transform .3s;
}
.header nav .btn span:after {
  content: '';
  background-color: #FD5B4E;
  width: 100%;
  height: 0.1875rem;
  display: block;
  position: absolute;
  transition: top .3s .4s,transform .3s;
  top: 0.625rem;
}

<body>
  <header id="header" class="header sidbar">

    <nav>
      <button class="btn"><span></span></button>

    </nav>
  </header>
  <!-- /header -->


</body>

FYI, you also have collapsing margin problems on your button, this might just be because you are only showing us part of your code. One way to overcome this is to add overflow:auto to your .header nav {} CSS rule. More about collapsing margins from sitepoint

thanks bro it really helped me to understand button and div. I'm using Css grid. Will that affect margin collapse in FF?. WHAT should I do for that fix? — Vigneshwar kumar, Oct 22 '17 at 04:19
@Vigneshwarkumar CSS grids shouldn't affect the collapsing margin problem, its something that happens even with basic css/html. [See this question to understand it more](https://stackoverflow.com/questions/11661264/adding-css-border-changes-positioning-in-html5-webpage). If my answer helped with your original question, consider accepting it so it get's marked as resolved on the site. See the help page [What to do when someone answers my question?](https://stackoverflow.com/help/someone-answers) It will also give us both rep points. PS I'm not a bro, I'm female :) — FluffyKitten, Oct 22 '17 at 19:41
@Vigneshwarkumar FYI, here's the fiddle updated with `overflow:auto` added: https://jsfiddle.net/dt17u5uz/3/ Compare it to https://jsfiddle.net/dt17u5uz/2/ and you'll see the difference that the collapsing margin was causing. — FluffyKitten, Oct 22 '17 at 19:45

Navbar elements appear different in Firefox and Chrome

1 Answers1