справлены проблемы отображения эмодзи на iPhone: добавлены iOS-специфичные стили для модального окна, сетки эмодзи и кнопки эмодзи

This commit is contained in:
kazachilo 2025-03-17 16:00:54 +03:00
parent ce75907087
commit 70933a6980
3 changed files with 54 additions and 0 deletions

View File

@ -2,12 +2,28 @@
margin-bottom: var(--spacing-medium); margin-bottom: var(--spacing-medium);
max-height: 300px; max-height: 300px;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; /* Предотвращаем горизонтальный скролл */
} }
.emojiGrid { .emojiGrid {
display: grid; display: grid;
grid-template-columns: repeat(6, 1fr); grid-template-columns: repeat(6, 1fr);
gap: 8px; gap: 8px;
margin: 0 auto; /* Центрируем сетку */
}
@supports (-webkit-touch-callout: none) {
/* Стили только для iOS устройств */
.emojiGrid {
width: auto; /* Автоматическая ширина вместо фиксированной */
max-width: 300px; /* Ограничиваем максимальную ширину */
grid-template-columns: repeat(5, 1fr); /* Меньше колонок для iOS */
}
/* Исправление для предотвращения проблем с прокруткой на iOS */
.emojiContainer {
-webkit-overflow-scrolling: touch;
}
} }
.emojiItem { .emojiItem {
@ -24,6 +40,16 @@
font-size: 1.5rem; font-size: 1.5rem;
} }
@supports (-webkit-touch-callout: none) {
/* Стили только для iOS устройств */
.emojiItem {
-webkit-appearance: none;
-webkit-tap-highlight-color: transparent;
/* Исправление для iOS Safari, чтобы предотвратить проблемы с рендерингом эмодзи */
transform: translateZ(0);
}
}
.emojiItem:hover { .emojiItem:hover {
background-color: rgba(0, 0, 0, 0.05); background-color: rgba(0, 0, 0, 0.05);
} }

View File

@ -21,6 +21,15 @@
margin: 0 var(--spacing-medium); margin: 0 var(--spacing-medium);
} }
@supports (-webkit-touch-callout: none) {
/* Стили только для iOS устройств */
.modal {
width: calc(100% - var(--spacing-large) * 2);
margin: 0 var(--spacing-large);
max-width: 90vw; /* Ограничиваем ширину относительно вьюпорта */
}
}
.header { .header {
margin-bottom: var(--spacing-medium); margin-bottom: var(--spacing-medium);
} }

View File

@ -113,6 +113,25 @@
cursor: pointer; cursor: pointer;
} }
@supports (-webkit-touch-callout: none) {
/* Стили только для iOS устройств */
.emojiSelector {
display: flex;
justify-content: center;
align-items: center;
}
.emojiButton {
display: flex;
justify-content: center;
align-items: center;
padding: 0;
line-height: 1; /* Важно для вертикального центрирования текста на iOS */
-webkit-appearance: none;
-webkit-tap-highlight-color: transparent;
}
}
.actions { .actions {
display: flex; display: flex;
justify-content: center; justify-content: center;