CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jesse
Jesse

Reputation: 508

Sticky nav on scroll acting weird in Safari

I coded a simple, one-page website for my parents from scratch, and I added a simple navigation menu below the hero that sticks when it reaches the top of the browser on scroll. It works flawlessly in Chrome and Firefox.

In Safari, the stick on scroll part works fine, but everything inside the navbar does this weird thing where it re-animates in from the left.

Here's the site: http://firstfruitsllc.com

Here's the little jQuery script and the CSS:

var mn = $(".nav");
mns = "nav-fixed";
hdr = $('header').height();

$(window).scroll(function() {
  if ($(this).scrollTop() > hdr) {
    mn.addClass(mns);
  } else {
    mn.removeClass(mns);
  }
});

.nav {
  border-bottom: 2px solid #eee;
  position: relative;
  background: white;
  height: 100px;
  margin-bottom: -100px;
  box-sizing: border-box;
  overflow: hidden;
  transition: 0.2s ease-in-out;
}
.nav-fixed {
  z-index: 999998;
  width: 100%;
  max-width: 1440px;
  position: fixed;
  top: 0;
  transition: 0.2s ease-in-out;
  -webkit-box-shadow: 0px 6px 10px -5px rgba(0, 0, 0, 0.08);
  -moz-box-shadow: 0px 6px 10px -5px rgba(0, 0, 0, 0.08);
  box-shadow: 0px 6px 10px -5px rgba(0, 0, 0, 0.08);
}
.nav-fixed:before {
  z-index: 999999;
  content: '';
  display: block;
  position: absolute;
  width: 150px;
  height: 50px;
  top: 25px;
  left: 25px;
  background-image: url('https://dl.dropboxusercontent.com/s/uezydedqpo55ub2/first-fruits-logo-color.svg?raw=1');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transition: all 0.5s ease-in-out;
}

Thanks!

Upvotes: 2

Views: 1171

Answers (3)

Brett DeWoody
Brett DeWoody

Reputation: 62743

The issue occurs because new animatable properties are being added when the .nav-fixed class is added. Specifically width and max-width. To prevent this you can add

width: 100%;
max-width: 1440px;

to the .nav class.

Upvotes: 0

greengiraffe
greengiraffe

Reputation: 89

When you add width: 100% to .navigation, the glitch is gone. I cannot explain why Safari behaves so odd though.

Upvotes: 0

Andrew Herder
Andrew Herder

Reputation: 113

It looks like safari is having a hard time with the transition of no widths being declared to having both declared as it goes to fixed. Try this: 

.nav
{
    width: 100%;
    max-width: 1440px;
}

Upvotes: 1

Related Questions