Точная копия первых трёх экранов мобильной главной (RU), завёрнутая в шесть разных реализаций сгиба «уголок» — каждая написана с нуля. Контент, шрифты и логотипы настоящие; отличается только механизм фолда.
Тест на телефоне: медленно тяни первые две страницы (где логотипы/крупный текст) — там фликер был всегда. Сравни v1 с v3/v5/v6. Параметры через URL ниже.
will-change: clip-pathОказалось, в копии я случайно пропустил ровно одну строку из прода: .peel-sheet { will-change: clip-path }. Она промоутит лист в отдельный GPU-слой, который перерисовывается покадрово — ровно тот слой, что не успевает к дедлайну растра на Adreno. Если v1b мерцает, а v1 — нет, фикс = удалить эту строку из PeelHome.
В копии было 3 листа = 3 слоя. В проде вся колода (~13 листов), и у каждого .peel-page стоит will-change: opacity → каждый лист = отдельный полноэкранный GPU-слой при DPR3. ~13 слоёв (>100MB) — совсем другая нагрузка на композитор Adreno, чем 3. Если v1c мерцает — причина в количестве слоёв/памяти, а не в технике сгиба. Параметры: ?pages=20, ?promote=1.
Полная колода (навигация работает), тот же сгиб, но окклюдированные/дальние листы выкидываются из композитинга через content-visibility:hidden + снятие will-change. Adreno держит ~3 слоя вместо 13. Если v1d чистый с 13 листами — это и есть фикс для прода. Тюнинг окна: ?win=2.
Покадровый CSS clip-path по тяжёлому контенту + отражённый флап. Тот же renderFold() без SvelteKit. Если мерцает и тут — причина чисто в clip-path, а не в остальном коде приложения.
Размытие сгиба фейкается стопкой из 10 клипованных <div> (как у Kitty), т.е. ~12 clip-path-перерисовок за кадр. Проверяет, усиливает ли фликер количество клип-слоёв.
Геометрия как в StPageFlip: kept-страница клипуется, а флап позиционируется покадровой matrix()-рефлексией. Двигающийся transform на флапе — исторически первый триггер фликера. Противоположность v3/v5.
Уголок построен из повёрнутых overflow:hidden-боксов и двигается только translate — прямоугольный clip композитора, контент не перерисовывается. Открывает «изнанку» (сетку). Чистая проверка гипотезы.
Контент показывается через повёрнутый overflow:hidden (двигаем translate-ом, без маски), снизу видна следующая страница. Только лёгкий флап-сетка остаётся на clip-path. Самый правдоподобный «настоящий фикс».
Каждая страница один раз рендерится в битмап (SVG foreignObject) и складывается через ctx.clip + drawImage — одна GPU-поверхность, никакого DOM clip-path. Путь WebGL/canvas. Цена: во время сгиба это снимок, не живой DOM.
Уголок физически поднимается к тебе и заворачивается вокруг диагонального ребра под перспективой, с растущей тенью; снизу открывается следующая страница. Живой DOM, никаких снимков и three.js. Композиторные трансформы → без фликера.
CSS 3D · самый «3D» v9 · soft peel (peel.js)Техника peel.js: плоский отражённый флап + блик-ребро по сгибу + мягкая тень = иллюзия изгиба бумаги. Полностью 2D (никакого 3D-трансформа) → максимально надёжно на любом GPU.
2D · самый надёжный v10 · page-turnВся страница поднимается вокруг нижнего ребра под перспективой (как жёсткая страница книги), показывает изнанку-сетку и открывает следующую. Без clip-path вообще. Другой, «книжный» характер.
CSS 3D · книга v12 · soft page (3→4) ⭐Та самая мягкая анимация 3→4 из react-pageflip (HTML-режим). Не жёсткий поворот доски — страница ПЕРЕКАТЫВАЕТСЯ: вертикальный сгиб уходит от правого края к корешку, контент остаётся плоским и заворачивается изнанкой-сеткой, снизу открывается следующая. Изгиб делают две тени StPageFlip (глянцевое ребро + тень снизу). Живой DOM, без three.js/снимков/3D.
soft · то, что ты просил v11 · hard flip (обложка)Это «твёрдая обложка»: вся плоская страница ригидно поворачивается вокруг левого корешка под перспективой. Для сравнения с мягкой v12 — это НЕ то, что нужно, но полезно видеть разницу hard vs soft.
hard · для сравненияv7 (three.js/WebGL) лежит тут, но он делает тяжёлый снимок контента и на мобиле виснет на «rendering snapshots» — поэтому от three.js отказались. Всё выше — на живом DOM.
URL-параметры для любой версии: ?theme=dark — тёмная тема; ?steps=10 — квантовать сгиб в 10 шагов (для теста дискретного фолда). Пример: /v5-overflow/?theme=dark&steps=12