【问题标题】:Weird jump on nav bar导航栏上的奇怪跳转
【发布时间】:2016-08-24 16:06:58
【问题描述】:

[编辑] 此问题仅出现在 Chrome 和 Opera 上。 Firefox 和 Edge 不会看到这一点。

我不知道它何时以及为什么开始发生,所以我认为我应该直接通过网站链接提供:hipark-sez.com。我使用 bootstrap 创建了这个网站。

当我向下滚动时(主要是在查看端口左轮播),我注意到我的顶部导航栏创建了一个小跳跃。如下:
(可能需要上下滚动几次,这个问题有时不会出现)

您可以通过截屏看到导航栏高度的细微差别。但是当我在开发者工具中查看导航栏高度值时,显示导航栏在任何一种情况下都是 51px(50px 高度 + 1px 边框)高度。这对我来说很奇怪。

即使我将导航栏的高度指定为 50px(我认为这是不必要的)或将导航标签顶部位置属性指定为 0,奇怪的跳转仍然存在。

谢谢!

【问题讨论】:

  • 对不起。我刚测试过。此问题仅出现在 Chrome 和 Opera 上。 Firefox 和 Edge 没有这个问题。

标签: html css twitter-bootstrap


【解决方案1】:

添加到您的“navbar-fixed-top”类。

  -webkit-backface-visibility: hidden;

【讨论】:

  • 好像这样就解决了问题!但是为什么这解决了这个问题?这个属性隐藏了什么?
  • 当在短页面和长页面之间导航时,页面会在某些浏览器上“跳跃”一点。这是因为滚动条在短页面时被隐藏,而在长页面时再次显示,这使得页面稍微水平移动。它提供的众多修复之一是图层 Z-Index 问题、动画闪烁和滚动闪烁(您有)
  • 但是我的网站只有一页(长页)。根本没有水平滚动条。它不应该有这样的问题。
  • 我指的是部分跳转
  • 嗯...其实我还是没明白。但似乎我不应该在这个特定问题上花费太多时间。再次感谢您的帮助!
猜你喜欢
  • 2016-09-21
  • 2018-09-25
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-07-17
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多