在Chrome中，position: sticky会在元素周围添加一些空间。

Question

在Chrome中，position: sticky会在元素周围添加一些空间。

4

描述

我有一个 <header> 元素，它使用 position: sticky 属性在用户滚动页面时将其固定在页面顶部。但是在 Chrome 中，该元素似乎不会按预期显示，而是在元素的顶部和左侧添加一些空间。我已经从我的 CSS 文件中隔离出了代码以重现此错误，并在 Chrome（Android 和 Windows 7 桌面）中成功重现了它。是否有人知道为什么会发生这种情况，以及是否有解决方法？

代码示例（也可作为Codepen使用）

body {
  margin: 0;
}

header {
  display: block;
  height: 44px;
  background: #263238;
  color: #fafafa;
  padding: 2px 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

header.sticky {
  position: -webkit-sticky;
  position: sticky;
  z-index: 1101;
  top: 0;
}

<p>Blah blah</p>

<header class="sticky"> 
  <button>Home</button> 
  <button>About</button>
</header>

<!-- some spacing to allow users to scroll the page -->
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

故障及预期行为的截图

以下图片展示了在所有浏览器上 <header> 元素应该是什么样子。目前，Chrome 似乎不能正确地显示它（请参见下一张图片）。

这张图片展示了 Chrome 中 <header> 元素的样子。请注意元素左侧和顶部留下的一小块空白。

注解

据我所知，我的 CSS 的其余部分并没有真正干扰元素的样式，您可以从提供的 Codepen 和片段中看到。
由于这个 bug 出现在我的 CSS 框架中，项目名称和徽标已被移除以避免自我推销。
鉴于上述注意事项，我更喜欢纯 CSS 解决方案（不涉及 JavaScript 或更改 HTML），除非没有其他办法。
我可以在 Android 5.0.2 上的 Chrome 56.0.2924.87 和 Windows 7（64 位）上的 Chrome 57.0.2987.98（64 位）中成功重现此 bug。

- Angelos Chalaris

2

在Chrome中无法重现问题...根本没有边距！ - andreas

1

你的代码在 Windows 10 上的 Chrome、Firefox 和 Opera 中表现如预期一样。但是在 Internet Explorer 11 上却失败了。所有浏览器均为最新版本。 - Andrei V

在使用position:sticky之前，请查看此链接http://caniuse.com/#search=position%3A%20sticky，因为它不兼容所有浏览器。 - AG_

我仍然可以在Android上的Chrome 56.0.2924.87（设备无法进一步更新）和Win7上的Chrome 57.0.2987.98（64位）中轻松重现该错误。 - Angelos Chalaris

@AndreiV 相反，我正在最新版本的 Chrome 上运行此代码，并接受它无法在旧版浏览器上运行的事实。这可能是操作系统问题吗？我稍后会在另一台设备上尝试在 Ubuntu 16.04 上的 Chromium 中复制此问题，但我不认为我会注意到任何区别。 - Angelos Chalaris

显示剩余3条评论

3个回答

0

我曾经遇到过同样的问题。这是我如何解决的。

将overflow: hidden添加到body会禁用滚动。因此，我只添加了overflow-x: hidden

html,body{
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

我希望它能帮助其他人。

- Hujjat Nazari

-4

将不支持的 position: sticky 替换为 position: fixed; width: 100%; 并在所有浏览器上尝试。正如 @aje 所提到的，在使用实验性/新的 CSS3 样式之前，始终要检查浏览器兼容性。

- Dinca Adrian

1

问题并不在于浏览器支持，因为我可以在完全支持“position: sticky”的Chrome 57中重现它。使用“position: fixed”并不能以最佳方式处理这种情况，因为标题将无法按预期行事，而只会按预期显示。 - Angelos Chalaris

将 sticky 替换为 fixed 并不能解决使用 sticky 的问题，我相信反对者会以此为论据。 - Asons

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- AG_ · Accepted Answer

现在我可以看到你想表达什么了，box:shadow 在这种情况下是有害的。我猜你不能移除它，所以我已经在 body 的 css 中添加了 overflow:hidden。请查看下面的代码片段。

body {
  margin: 0;
  overflow:hidden;
  background: red
}

header {
  display: block;
  height: 44px;
  background: #263238;
  color: #fafafa;
  padding: 2px 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

header.sticky {
  position: -webkit-sticky;
  position: sticky;
  z-index: 1101;
  top: 0;
}

<p>Blah blah</p>

<header class="sticky"> 
  <button>Home</button> 
  <button>About</button>
</header>

<!-- some spacing to allow users to scroll the page -->
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>