CSS - Position:Fixed navigation bar not working in Safari (OS X or iOS)

问题

Here is the site in question.

If you view the page in Chrome, everything works as expected (scroll past the landing and the nav bar comes into view). However, it stays above everything in Safari, in both OS X and iOS. You can pull the page down and see the nav bar up there.

I rarely view the site on mobile or Safari, but I do know that this worked in the past and that no changes to the CSS have been made on our end. That said, I'm wondering if it was a Safari change that caused this.

One last note - I'm not a web dev by trade, but I know enough to be dangerous. I'm happy to provide any other details needed.

Thanks!

回答1:

I resolved this in Safari by following this prior post: Position fixed not working in Safari Version 8.0.2

What's causing the problem is your parent <div id="page"> is using transform: translate3d(0, 0, 0); & -webkit-transform: translate3d(0, 0, 0); . There are bugs with using this in Safari.

This is the code in your CSS file that needs to be commented out or deleted:

:not(html, #top-bar) {
     -webkit-transform: translate3d(0, 0, 0); 
     transform: translate3d(0, 0, 0) 
}

回答2:

Your nav bar it's fixed on top?, probably you need to add these atributes:

navbar{
  margin: 0;
  top: 0;
  left: 0; }

I had some issues like that in the past with safari, but please provide your html and css code.

来源：https://stackoverflow.com/questions/35906114/css-positionfixed-navigation-bar-not-working-in-safari-os-x-or-ios