справлены проблемы с отображением на iPhone: 1) величен z-index для ImageViewer, чтобы он отображался поверх хедера и футера; 2) редотвращен нежелательный скроллинг всего контейнера с помощью overscroll-behavior и правильных настроек overflow

This commit is contained in:
kazachilo 2025-03-17 11:53:48 +03:00
parent 947f15ca5b
commit 7c396eb0bd
3 changed files with 10 additions and 9 deletions

View File

@ -8,6 +8,7 @@
overflow: hidden; overflow: hidden;
position: relative; /* Добавляем относительное позиционирование */ position: relative; /* Добавляем относительное позиционирование */
height: 100%; /* Устанавливаем высоту 100% */ height: 100%; /* Устанавливаем высоту 100% */
overscroll-behavior: none; /* Предотвращает "резиновый" эффект на iOS */
} }
.main { .main {
@ -18,6 +19,7 @@
overflow-y: auto; /* Разрешаем скроллинг только для основного контента */ overflow-y: auto; /* Разрешаем скроллинг только для основного контента */
-webkit-overflow-scrolling: touch; /* Улучшаем инерционный скроллинг на iOS */ -webkit-overflow-scrolling: touch; /* Улучшаем инерционный скроллинг на iOS */
padding-top: 0px; /* Уменьшаем отступ до 20px */ padding-top: 0px; /* Уменьшаем отступ до 20px */
overscroll-behavior: contain; /* Ограничивает эффект скролла только этим элементом */
} }
.container { .container {

View File

@ -8,7 +8,7 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
z-index: 1000; z-index: 9999; /* Значительно увеличиваем z-index, чтобы отображалось поверх хедера и футера */
} }
.content { .content {
@ -42,7 +42,7 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
z-index: 1001; z-index: 10000; /* Увеличиваем z-index еще больше, чтобы кнопка была поверх фона */
} }
/* Медиа-запрос для мобильных устройств */ /* Медиа-запрос для мобильных устройств */

View File

@ -29,7 +29,7 @@
#root { #root {
min-height: 100vh; min-height: 100vh;
background-color: var(--color-background); background-color: var(--color-background);
overflow-y: auto; overflow: hidden; /* Изменено с overflow-y: auto */
overflow-x: hidden; overflow-x: hidden;
position: absolute; position: absolute;
top: 0; top: 0;
@ -41,6 +41,10 @@
/* Базовые стили */ /* Базовые стили */
html { html {
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
overflow: hidden; /* Изменено с overflow-y: scroll */
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE and Edge */
overscroll-behavior: none; /* Предотвращает "резиновый" эффект на iOS */
} }
body { body {
@ -65,12 +69,7 @@ body {
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
text-size-adjust: 100%; text-size-adjust: 100%;
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
} overscroll-behavior: none; /* Предотвращает "резиновый" эффект на iOS */
html {
overflow-y: scroll;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE and Edge */
} }
html::-webkit-scrollbar { html::-webkit-scrollbar {