Как сделать так, чтобы Google Chrome не обрезал нижнюю часть эффекта тени CSS при использовании маски CSS? ⇐ CSS

[Anonymous]

Я хочу разместить горизонтальную линию со светящимся эффектом под заголовками на веб-странице, где и линия, и свечение исчезают на левом и правом концах. У меня это работает почти так, как я хочу в Firefox, но в Google Chrome нижняя часть свечения обрезается.
В частности, в Chrome это всегда выглядит так, как будто свойство no-clip не установлено (или, по крайней мере, удаление этого свойства приводит к тому, что Firefox обрезает нижнюю часть так же, как это делает Chrome).
Кто-нибудь знает, как это исправить?
Вот работоспособный код фрагмент:

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

html {
background: black;
font-size: 16px;
margin: 0;
}
.first-heading {
margin: 0.9375rem 3.5rem;
font-family: serif;
font-weight: 400;
font-style: normal;
color: #bdbdbd;
}
.page-heading {
width: 100%;
display: inline-flex;
position: relative;
}
.page-heading::after {
content: "";
position: absolute;
left: 0;
width: 100%;
height: 100%;
border-bottom: 0.125rem solid gold;
filter: drop-shadow(0 0 0.5rem gold) drop-shadow(0 0 0.5rem gold);
mask: linear-gradient(0.25turn, black 0%, white 6.25%, white 93.75%, black 100%) luminance no-clip;
}

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

Heading

Вот скриншот результата этого фрагмента кода из Firefox, показывающий, как он должен выглядеть:


А вот скриншот того же фрагмента в Chrome, показывая, что нижняя часть свечения обрезана:


То же самое происходит и на веб-странице, которую я на самом деле редактирую, поэтому проблема не ограничивается рендерингом фрагмента кода.

Подробнее здесь: https://stackoverflow.com/questions/798 ... dow-effect