Усунення несправностей

Розв’язання проблем iOS Safari, відтворення відео, повного екрана та навігації з клавіатури.

iOS Safari

Область перегляду не заповнює екран / чорна смуга внизу

Панель адреси Safari, що згортається, робить 100vh вищим за видиму область. Використовуйте 100dvh:

css

Горизонтальне прокручування / вміст виходить за межі

100vw враховує ширину смуги прокручування на iOS, і вміст виходить за край. Використовуйте 100% і заблокуйте горизонтальне переповнення:

css

Оновлення потягуванням / пружний відскок

Оновлення потягуванням і пружний відскок у Safari конфліктують із вертикальними свайпами. У жодному разі не ставте overscroll-behavior: none на html, body. Це вимикає звичайне прокручування сторінки. ReelPlayerOverlay, LightboxOverlay і StoriesPlayerOverlay роблять це на власних контейнерах. Для власних макетів обмежте область дії:

css

Крайній випадок SwipeToClose вниз. Будь-який SwipeToClose з direction="down" (Lightbox, плеєр історій, власні оверлеї) перехоплюється в iOS Safari — браузер запускає оновлення потягуванням на рівні документа раніше, ніж обгортка побачить дотик. Оверлей блокує прокручування body, але вертикальні жести в корені лишаються за браузером. Обмежте overscroll-behavior-y: contain на <html> лише поки оверлей відкритий, і поверніть як було на закритті:

tsx

Масштабування щипком заважає жестам

Вимкніть масштабування, щоб щипок і подвійний дотик не спрацьовували під час свайпів:

html

viewport-fit=cover розширює ваш макет у безпечну зону Dynamic Island / вирізу.

Макет ламається після приховування клавіатури

Іноді Safari лишає область перегляду стиснутою після закриття клавіатури. Скиньте її на blur:

tsx

Загальне

Слайди рендеряться розміром 0×0

Без пропса size слайдер читає розміри контейнера через ResizeObserver. Контейнер без висоти в CSS має розмір 0×0, тож нічого не рендериться. Передайте size або задайте контейнеру розміри:

css

Відео

Відео не відтворюється автоматично

Браузери блокують автовідтворення зі звуком. ReelKit виставляє muted і playsInline на кожному відеоелементі. Відео починається без звуку; користувач вмикає його перемикачем після дотику. Перевірте, чи не перевизначаєте ці атрибути у власному слайді.

Мініатюра відео / знімок кадру порожній

Знімок кадру малює відео на <canvas>. Відео з іншого джерела «забруднює» canvas, і малювання тихо не спрацьовує. Ваш CDN для відео має повертати заголовки CORS:

text

ReelKit виставляє crossOrigin="anonymous" за замовчуванням. Якщо використовуєте власний відеоелемент, додайте його самі.

Повний екран

Кнопка повного екрана нічого не робить у Safari

ReelKit вимикає Fullscreen API в Safari. iOS Safari дозволяє повний екран лише для <video> елементів. Десктопний Safari ламає position: fixed оверлеї в повному екрані: елементи втрачають контекст накладання або зникають. requestFullscreen() у Safari завершується без жодної дії.

Стрілки не гортають після передавання onNavKeyPress

onNavKeyPress замінює стандартну навігацію з клавіатури. ReelKit перестає викликати next()/prev() і передає керування вам. Викликайте їх самі:

tsx

Клавіша Escape не закриває оверлей

Контролер клавіатури обробляє лише стрілки. ReelPlayerOverlay і LightboxOverlay слухають Escape окремо. Якщо будуєте власний оверлей, додайте власний обробник Escape у onClose.