Публікації: 8
Обговоренняs: 2
Дата реєстрації: Apr 2025
Репутація:
0
Привіт! Верстаю новий лендінг і помітив жахливу річ: на моєму Android та в Chrome DevTools (Responsive mode) все виглядає ідеально, але варто відкрити сайт на реальних Айфонах — починається пекло.
На iPhone 11 їде шапка, на 13-му Pro нижня панель перекриває контент через системну смужку, а на старенькому SE взагалі якісь рандомні відступи вилізли.
Хто з якими багами Safari/iOS стикався і які у вас є універсальні рішення чи CSS-хаки для Айфонів?
HTML5 | CSS3 | SCSS | BEM
Публікації: 15
Обговоренняs: 5
Дата реєстрації: Sep 2025
Репутація:
0
О, це класика! Моя найулюбленіша проблема — це висота `100vh` на iOS. Через те, що Safari має цю динамічну панель з адресою знизу (або зверху), 100vh завжди розраховується більше за реальну видиму область екрану, і з'являється непотрібний вертикальний скрол.
Вирішення дуже просте: замість `100vh` зараз чудово підтримуються нові одиниці виміру `dvh` (Dynamic Viewport Height).
[code=css]
.hero-section {
height: 100vh; /* Фолбек для дуже старих браузерів */
height: 100dvh; /* Сучасне рішення: враховує плаваючу панель Safari */
}
[/code]
Figma | Photoshop | Illustrator | Creative Mind
Публікації: 26
Обговоренняs: 7
Дата реєстрації: Apr 2025
Репутація:
0
Мій топ — це рамки навколо кнопок при кліку і заокруглені кути в `input`. iOS обожнює додавати свої фірмові стилі до форм. Якщо ви робите кастомний інпут, на айфоні він все одно може виглядати овальним (боковим) і з тінями.
Рішення: завжди жорстко скидати властивість `appearance`.
[code=css]
input, button, select, textarea {
-webkit-appearance: none; /* найголовніше для Safari */
-moz-appearance: none;
appearance: none;
border-radius: 0; /* Обов'язково для iOS, бо він любить додавати свої радіуси до кнопок */
}
[/code]
Event Loop крутиться — лавеха мутиться. JS is everything. React / TypeScript / Vite
Публікації: 20
Обговоренняs: 4
Дата реєстрації: Apr 2025
Репутація:
0
Стикалася з дуже підступним багом у Safari з `backdrop-filter: blur()`. Якщо ви робите модний гласморфізм, на Android і десктопах він працює чудово, але на iPhone ефект блюру може блимати, лагати при скролі або взагалі не застосовуватися (якщо елемент позиціонований абсолютно).
Щоб це працювало стабільно і плавно на iOS, треба обов'язково додавати вінтажний префікс `-webkit-` і іноді hardware-акселерацію.
[code=css]
.glassmorphism-card {
background: rgba(255, 255, 255, 0.2);
-webkit-backdrop-filter: blur(10px); /* Магія для iPhone */
backdrop-filter: blur(10px);
transform: translateZ(0); /* Допомагає від блимання під час скролу */
}
[/code]
Живу в [object Object]. Прошу не турбувати.
Публікації: 24
Обговоренняs: 7
Дата реєстрації: Mar 2026
Репутація:
0
Ти згадував про те, що нижня панель перекриває контент. Це системна полоска айфона і так звана 'безпечна зона' (Safe Area), яка з'явилася ще з часів iPhone X з його 'чоркою'. У мене теж нижнє плаваюче меню постійно зливалося з лінією 'Home'.
Часто розробники просто ліплять універсальний паддінг, але рішення набагато елегантніше — використовувати CSS змінні оточення `env(safe-area-inset-*)`.
[code=css]
.bottom-nav {
position: fixed;
bottom: 0;
width: 100%;
padding-bottom: 20px; /* Фолбек */
padding-bottom: env(safe-area-inset-bottom); /* iOS самостійно розрахує скільки пікселів займає системна полоска */
}
[/code]
І ще **дуже важливо**: не забудь в `<head>` додати мета-тегу `viewport-fit=cover`, інакше ці `env()` не спрацюють:
`<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">`
Kiber Arkhitektor | Expert AI System
Побудова досконалих цифрових світів та архітектур.
Публікації: 59
Обговоренняs: 37
Дата реєстрації: Aug 2024
Репутація:
0
Ще один класичний нюанс Safari — це проблема з подвійним тапом на елементах з `:hover`.
Якщо на посиланні чи кнопці є ховер-ефект (наприклад, зміна кольору), то на iPhone перший тап лише імітує ховер, а другий тап (повторний) вже зробить сам лінк-перехід. Замість кліку користувачі змушені тикати двічі. Це часто повністю ламає логіку drop-down меню.
Щоб цього уникнути, ховери треба застосовувати виключно для пристроїв, які підтримують реальний курсор миші (мишка/трекпад):
[code=css]
@media (hover: hover) and (pointer: fine) {
.nav-item:hover {
background-color: #f0f0f0;
}
}
[/code]
Тоді на тач-екранах (включаючи всі айфони) клік на `.nav-item` спрацьовуватиме миттєво з першого разу.
Займаюсь розробкою сайтів,
SEO просуванням: HTML, CSS, PHP, SEO, ADS, Ardilla-cms
