1
0

Ошибки фронта PWA

Правки для фронта в PWA режиме.
This commit is contained in:
2026-01-17 14:21:09 +07:00
parent 9b2a2f0c2e
commit 15725ae90a
3 changed files with 50 additions and 2 deletions

View File

@@ -132,4 +132,47 @@ body.panel-open {
/* Используем overscroll-behavior вместо touch-action: none для PWA совместимости */
overscroll-behavior: none !important;
}
/* ========== PWA режим: исправление "залипания" свайпа ========== */
/* iOS PWA не понимает когда заканчивается вертикальный жест */
/* Эти правила помогают браузеру корректно определять направление скролла */
@media (display-mode: standalone), (display-mode: fullscreen) {
html, body {
/* Отключаем overscroll bounce на уровне документа */
overscroll-behavior: none;
/* Отключаем выделение текста на всём документе при касании */
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
}
/* Горизонтальные скролл-контейнеры */
.columns,
.mobile-cards {
/* Изолируем overscroll внутри контейнера */
overscroll-behavior: contain;
}
/* Вертикальные скролл-контейнеры */
.cards,
.archive-list {
overscroll-behavior: contain;
}
/* Скрываем скроллбар на мобильных */
.cards,
.archive-list,
.columns,
.mobile-cards {
scrollbar-width: none;
-ms-overflow-style: none;
}
.cards::-webkit-scrollbar,
.archive-list::-webkit-scrollbar,
.columns::-webkit-scrollbar,
.mobile-cards::-webkit-scrollbar {
display: none;
}
}
</style>

View File

@@ -130,6 +130,10 @@ onUpdated(refreshIcons)
display: flex;
flex-direction: column;
overflow: hidden;
/* Предотвращаем выделение/копирование текста при long-press */
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
}
.panel-header {

View File

@@ -350,8 +350,9 @@ onMounted(async () => {
/* ========== MOBILE: Архив ========== */
.archive-list.mobile {
/* 60px header + 40px title + 64px nav + safe-area */
max-height: calc(100dvh - 60px - 40px - 64px - var(--safe-area-bottom, 0px));
/* Как в Column.vue - большой запас для всех элементов */
/* safe-area-top + header + title + nav + safe-area-bottom + запас */
max-height: calc(100dvh - var(--safe-area-top, 0px) - 60px - 50px - 64px - var(--safe-area-bottom, 0px) - 20px);
max-width: none;
gap: 12px;
overflow-y: auto;