圆形页面和剪切粘性标题的渲染问题

Question

设置所需的布局

我正在尝试使用居中页面包装器实现“框架布局”，该页面具有圆角和粘性标题，仅使用现代CSS。 但是，我在不同浏览器上面临潜在的
渲染问题。

用文字描述

具体布局具有挑战性，因此请参阅下面的屏幕截图和最小可重现示例：

包装器（
• body

  的直接子级）：居中，与屏幕边缘和圆角 (

  border-radius

  ) 保持间距。

标题：使用
• position: sticky

   和 

  top: 0

   进行粘性定位。

为了处理包装器的圆角，我使用

overflow: clip

 隐藏主要内容和粘性标题的重叠边缘，同时 

保留 其粘性功能（据我所知，overflow: hidden

 会阻止 

position: sticky

 工作）。不幸的是，这种方法会导致几个问题......

---

遇到的问题

1. 标题边框半径裁剪：
   Chrome：保持顶部被夹住，但底部边缘不会被夹住。
   Firefox：剪辑更新较晚或仅在交互时（例如，单击内容）进行更新。
   Safari：按预期工作。
   注意：滚动回顶部有时无法正确剪辑标题。

标题上的

2. backdrop-filter: blur()

   ：
   

   Chrome & Firefox：延迟更新裁剪边框半径（个人感觉）。
   Firefox：不起作用（
   • 检查此错误） - 删除标题父元素的 border-radius

      或 

     overflow

      属性可以解决此问题。

   Safari：按预期工作。

---

尝试修复

向标题添加具有值
• will-change

   或 

  scroll-position

   的 CSS 

  transform

   属性并不能解决问题。

使用
• 伪元素（header::before

  ）来模糊背景也不起作用。

我注意到，由循环动画或窗口调整大小触发的
• 样式重新计算或重新绘制会正确更新剪辑。

---

最小的、可重现的示例

.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 上也有示例

---

请求帮助

这些问题是由于浏览器（渲染）错误造成的，还是我的 CSS 有问题？

任何有关解决方法的建议将不胜感激，但请注意，我正在寻找一个
仅 CSS 的解决方案。 此外，请提供错误报告或规范参考的链接（如果相关）。

Answer 1

你应该稍微改变一些事情。首先，将包装器的大小与屏幕匹配，而不是与代码匹配（我建议您使用

height:100vh;

）。
另一方面，不要在包装器中使用溢出夹，而是使用 

overflow:scroll;

。
最后，为了使边框不会直接离开包装器，请在主类中添加 

border-radius: 0 0 15px 15px;

，并在标头类中添加 

border-radius:15px 15px 0 0;

。

最终的 CSS 代码如下所示：

.wrapper {
  border-radius: 20px;
  margin-right: auto;
  margin-left: auto;
  border: 3px solid #7f5af0;
  width: 90%;
  height: 90vh;
  overflow: scroll;
}

header {
  position: sticky;
  top: 0;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background-color: rgba(44, 182, 125, 0.8);
  height: 100px;
  border-radius: 15px 15px 0 0;
}

/* setup (visual) */

* {
  margin: 0;
  padding: 0;
}

body {
  margin: 2rem;
  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;
  border-radius: 0 0 15px 15px;

}

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

p:not(:last-of-type),
ul {
  margin-bottom: 1em;
}

ul {
  margin-left: 1em;
}

::marker,
code,
a {
  color: #7f5af0;
}

code {
  border-radius: 0.2em;
  padding: 0.1em 0.2em;
  background-color: #16161a;
}