CSS-位置:固定的导航栏在Safari(OS X或iOS)中不起作用 [英] CSS - Position:Fixed navigation bar not working in Safari (OS X or iOS)

问题描述

此处是有问题的网站.

如果您在Chrome浏览器中查看该页面，那么一切都会按预期进行(滚动越过着陆，导航栏就会进入视图).但是，它在OS X和iOS的Safari浏览器中始终处于领先地位.您可以将页面拉下并在其中看到导航栏.

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.

我很少在移动设备或Safari上查看该网站，但我确实知道这在过去是可行的，并且我们对CSS的更改都没有做过.就是说，我想知道是否是由Safari引起的更改.

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.

谢谢！

推荐答案

我通过遵循以下先前的帖子在Safari中解决了此问题:

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

导致此问题的原因是您的父母<div id="page">正在使用transform: translate3d(0, 0, 0);& -webkit-transform: translate3d(0, 0, 0);.在Safari中使用此功能存在一些错误.

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.

这是CSS文件中需要注释或删除的代码:

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) 
}

这篇关于CSS-位置:固定的导航栏在Safari(OS X或iOS)中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！