问：

简介和设置

我尝试使用页面包装器和粘性定位标题来实现特定的布局设计。我会尝试解释/总结它，但很难用语言表达，所以请看下面的屏幕截图和最小的可重复示例。

意识到我可以使用一些 JavaScript 来实现我想要的结果，我仍然希望使用现代的纯 CSS 解决方案来完成它。

通常用于网页设计，包装器（的直接子项）居中，并且与屏幕边缘有一定的间距。为了让包装纸看起来更像一本书的一页，我给它起了圆角（）。在标题元素上使用和可以轻松创建粘性栏。目前为止，一切都好。bodyborder-radiusposition: stickytop: 0

由于包装器的边框半径，我需要一个解决方案来“切断”元素框的重叠边缘。首先我想用，但这不适用于 .因此，我遇到了它实现了（几乎）相同的结果，但保留了粘性功能。overflow: hiddenposition: stickyoverflow: cliphidden

问题

不幸的是，我只用这个最小的设置（在最新版本的 Chrome、Firefox 和 Safari 中测试）在浏览器上遇到了一些问题：

更新标题的“裁剪”边框半径：
- Chrome：保持在顶部，但不在底部边缘
- Firefox：更新延迟（延迟）或点击内容时
- Safari：预期行为
- 注意：再次滚动回顶部，标题根本不会被剪裁，或者有明显的延迟

backdrop-filter: blur()在标题上：
- Chrome 和 Firefox：使延迟变得更糟
- Firefox：不工作 - 删除标头的父元素的 or 属性将解决该问题border-radiusoverflow
- Safari：一切正常，符合预期

注意：起初，我以为 Chrome 在更新剪裁的边框半径方面也有延迟，但我认为我的实时页面上存在的一些动画会导致样式重新计算或/和重绘，这就是为什么剪裁有时会在适当的时候更新。调整浏览器窗口的大小也会更新“剪辑”。

我尝试使用伪元素（）来创建模糊的背景，希望它能解决Firefox中的模糊问题，但它不起作用。
添加到标题也没有解决问题。header::beforewill-change

现在，我不确定所有描述的问题是否都呈现了上述浏览器的错误，或者我的 CSS 设置是否无效/未被规范涵盖。我以前从未遇到过如此具体的渲染相关问题，所以我不知道可以考虑其他解决方案。

最小的、可重复的例子

.wrapper {
  overflow: clip;
  border-radius: 20px;

  margin-right: auto;
  margin-left: auto;
  border: 3px solid #7f5af0;
  width: 90%;
}

header {
  position: sticky;
  top: 0;

  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);

  background-color: rgba(44, 182, 125, 0.8);
  height: 100px;
}

/* setup (visual) */

* {
  margin: 0;
  padding: 0;
}

body {
  margin: 2rem;
  min-height: 3000px;
  font-family: sans-serif;
  font-weight: normal;
  line-height: 1.5;
  color: #94a1b2;
  background-color: #16161a;
}

main {
  padding: 1rem 5rem 5rem;
  font-size: 2em;
  background-color: #242629;
}

h1 {
  padding-top: 0.8em;
  font-weight: normal;
  text-align: center;
  color: #fffffe;
}

<div class="wrapper">
  <header>
    <h1>Sticky Header</h1>
  </header>
  <main>
    <p>I don't know exactly what to call this design layout. Is there a name for it? "Frame layout", "page within page layout" or "centered page layout"... It's definitely not new in web design, but there are some strange things happening here that I can't explain.<br>My guess is that there are some browser rendering issues going on because of the relatively new CSS properties. I'm aware that I could use some JavaScript to make everything work as aspected, but I want to achieve this design with CSS only.</p>
  </main>
</div>

CodePen 上的示例

我将不胜感激任何解决这些问题的建议或确认问题实际上是浏览器错误。

html css overflow 粘性 HTML 渲染

圆角页面包装器和剪裁的粘性页眉的呈现问题

Rendering issues with rounded page wrapper and clipped sticky header

简介和设置

问题

最小的、可重复的例子

评论