Сложные фоновые плюс ⇐ Html

[Anonymous]

Я создаю панель прогресса в стеклянном виде, изготовленном из 10 сложенных срезов < /strong>, каждый со своим собственным

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

backdrop-filter: blur()< /code>.

он идеально подходит на рабочем хром /крае, но на экранах с высоким DPR
< /strong> (Safari ios 17, Chrome Android 120) тонкие некрашенные линии
Sweeticle BLAIVE (Br /> Sweemble (Br /> Sweemble (Br /> Sweemble (Br /> < /h4>
< /p>
[h4]. Границы). < /p>
 фактическое < /h4>
Горизонтальные швы 1-px /промежутки между срезами на мобильных и таблетовых просмотрах < /p>
 Минимальный воспроизводимый пример < /h4>




const container = document.getElementById('glass');
const blurValues = [10, 9, 8, 7, 6, 5, 4, 3, 2, 1];
const sliceCount = blurValues.length;

blurValues.forEach((blur, i) => {
const slice = document.createElement('div');
slice.className = 'glass-slice';
slice.style.top = `${(i / sliceCount) * 100}%`;
slice.style.height = `${100 / sliceCount}%`;
slice.style.backdropFilter = `blur(${blur}px)`;
slice.style.webkitBackdropFilter = `blur(${blur}px)`;
container.appendChild(slice);
});< /code>
body {
background: url('https://picsum.photos/600/400?blur=1') no-repeat center center fixed;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

.glass-container {
position: relative;
width: 280px;
height: 60px;
border-radius: 30px;
overflow: hidden;
backface-visibility: hidden;
}

.glass-slice {
position: absolute;
left: 0;
width: 100%;
background-color: rgba(102, 102, 102, 0.25);
will-change: backdrop-filter;
}< /code>
< /code>
< /div>
< /div>
< /p>
 🔍 визуальный пример < /h4>
Швы, которые появляются как видимые горизонтальные промежутки на определенных уровнях масштабирования (например, мобильный сафари, chrome android). < /p>


 Что я попробовал [/h4]
[list]
[*] Настройка высоты в VH 

, px и fr (grid) – Sews. 1 px [/b] скрывает швы, но смягчает края, которые
Designer отвергает.
[/list]

Вопрос

Как я могу удалить эти швы , без re -ember, re -come. (Android), Safari 17 (iOS), DPR 2–3.

Подробнее здесь: https://stackoverflow.com/questions/796 ... screen-siz