справлены проблемы с отображением на iPhone: 1) величен z-index для ImageViewer, чтобы он отображался поверх хедера и футера; 2) редотвращен нежелательный скроллинг всего контейнера с помощью overscroll-behavior и правильных настроек overflow
This commit is contained in:
parent
947f15ca5b
commit
7c396eb0bd
@ -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 {
|
||||||
|
|||||||
@ -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 еще больше, чтобы кнопка была поверх фона */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Медиа-запрос для мобильных устройств */
|
/* Медиа-запрос для мобильных устройств */
|
||||||
|
|||||||
@ -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 {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user