Граница градиента с маской CSS: края фиксированы, но толщина границы непостоянна в закругленных углах ⇐ CSS

[Anonymous]

Я создаю границу с градиентом в 1 пиксель, используя псевдоэлемент и маску CSS.

Изначально толщина границы была неодинаковая со всех сторон из-за субпиксельного рендеринга.
После применения преобразования графического процессора (

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

transform: translateZ(0)

), края теперь одинаковые, но закругленные углы (вершины) по-прежнему кажутся неровными/тоньше сторон.
Я хочу понять:

• почему это происходит именно по углам
• есть ли способ исправить это без добавления лишнего обертка div

ниже — это SS компонента-



ПРИМЕЧАНИЕ: Эта проблема возникает только при следующих условиях:
Разрешение экрана системы установлено на 1920×1080 при 100 % масштабировании
Масштаб браузера ≠ 100 % (например, 90 %, 110 %, 125 %)

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

.shimmer-bg {
animation-duration: 1.5s !important;
background-clip: content-box !important;
background-image: linear-gradient(
to right,
#f6f5ff 0,
#ECE7FF 20%,
#f6f5ff 40%,
#f6f5ff 100%
) !important;
padding: 11px 12px !important;
border-radius: 16px !important;
will-change: transform;
}
.shimmer-bg::before {
content: "";
position: absolute;
inset: 1px;
padding: 1px;
border-radius: 12px;
background: linear-gradient(45deg, #915dff
, #E67FDF);
-webkit-mask: linear-gradient(#fff, 0 0) content-box, linear-gradient($N100 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: exclude;
transform: translateZ(0);
}

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

Codepen MRE-
https://codepen.io/Meghna-Sharma-the-se ... en/MYezxWO
чтобы воспроизвести проблему, выберите размеры вашей системы как 1920X 1080, а затем вручную увеличьте масштаб до >=125%

Подробнее здесь: https://stackoverflow.com/questions/798 ... ent-at-rou