Проблемы с рендерингом с закругленной страницей и обрезанным липким заголовком. ⇐ CSS

[Anonymous]

Настройка желаемого макета
Я пытаюсь создать «макет с рамкой» с центрированной оберткой страницы и закругленными углами< /strong> и прикрепленный заголовок с использованием только современного CSS.

Однако я столкнулся с потенциальными проблемами с отрисовкой в разных браузерах.
Описать конкретный макет словами сложно, поэтому обратитесь к скриншотам и минимальному воспроизводимому примеру ниже:

• Обертка (прямой дочерний элемент тела): центрируется с интервалом от краев экрана и закругленными углами (

  Код: Выделить всё

  border-radius

  ).
• Заголовок: закрепленный, позиция: липкий и верхняя часть: 0.

Чтобы справиться с закругленными углами оболочки, я использовал overflow: clip, чтобы скрыть перекрывающиеся края основного содержимого и липкого заголовка, сохранив его липкую функциональность (AFAIK, overflow: скрытый не позволит позиции: липкий работать). К сожалению, такой подход приводит к нескольким проблемам...



Возникшие проблемы

• Обрезка по радиусу границы заголовка:
  • Chrome: остается обрезанным по верхним краям, но не обрезается по нижним краям. li>
    Firefox: вырезает обновления с опозданием или только при взаимодействии (например, при нажатии на контент).
  • Safari: работает как положено.
  • Примечание. Прокрутка вверх иногда не позволяет правильно обрезать заголовок.

• Код: Выделить всё

  backdrop-filter: blur()

  в заголовке:
  • Chrome и Firefox: задержки при обновлении обрезанного радиуса границы (личное ощущение).
  • Firefox: не работает (проверьте эту ошибку) — удаление свойства border-radius или overflow родительского элемента заголовка решит проблему.
  • Safari: Работает как положено.

Попытки исправить

• Добавление свойства CSS will-change со значениями прокрутки или преобразования в заголовок не решило проблемы. .
• Использование псевдоэлемента (

  Код: Выделить всё

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

Код: Выделить всё

Sticky Header


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.
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.

Пример также на CodePen

Обращение за помощью
Эти проблемы связаны с ошибками браузера (рендеринга) или это проблема с моим CSS?

Будем очень признательны за любые предложения по обходному пути, но обратите внимание, что я ищу решение, использующее только CSS.

Кроме того, предоставьте ссылки на отчеты об ошибках или ссылки на спецификации. если это актуально.

Подробнее здесь: https://stackoverflow.com/questions/766 ... cky-header