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

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

iOS Safari

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

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

.slider-container {
  height: 100dvh; /* not 100vh */
}

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

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

html, body {
  overflow-x: hidden;
}

.slider-container {
  width: 100%; /* not 100vw */
}

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

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

.slider-container {
  overscroll-behavior: none;
}

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

useEffect(() => {
  if (!isOpen) return;
  const html = document.documentElement;
  const prev = html.style.overscrollBehaviorY;
  html.style.overscrollBehaviorY = 'contain';
  return () => {
    html.style.overscrollBehaviorY = prev;
  };
}, [isOpen]);

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

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

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover" />

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

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

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

// React
<input
  onBlur={() => {
    window.scrollTo(0, 0);
    apiRef.current?.adjust();
  }}
/>

// Angular
(blur)="onInputBlur()"

onInputBlur() {
  window.scrollTo(0, 0);
  this.reelApi?.adjust();
}

Загальне

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

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

/* The parent must have a height for auto-sizing to work */
.slider-container {
  width: 100%;
  height: 100dvh;
}

Відео

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

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

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

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

Access-Control-Allow-Origin: *

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

Повний екран

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

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

Навігація з клавіатури

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

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

<Reel
  onNavKeyPress={(increment) => {
    // Your custom logic here
    console.log('Nav key:', increment);
    // You must trigger navigation yourself:
    apiRef.current?.[increment === 1 ? 'next' : 'prev']();
  }}
/>

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

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