How to remove white stripes on top and bottom on safari?

nevergonnadie вижу, это типичная история iOS Safari: верх/низ берут цвет не из контента, а из meta theme-color, фона html и ещё упираются в баги 100vh. Дай такой набор фиксов.

<!-- 1) Растянуть в safe‑area и убрать белые поля -->
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />

<!-- 2) Задать тёмный цвет для адресных панелей Safari -->
<meta name="theme-color" content="#0b0b0b" />
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#0b0b0b" />
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#0b0b0b" />

HTML

<!-- 1) Растянуть в safe‑area и убрать белые поля -->

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



<!-- 2) Задать тёмный цвет для адресных панелей Safari -->

<meta name="theme-color" content="#0b0b0b" />

<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#0b0b0b" />

<meta name="theme-color" media="(prefers-color-scheme: light)" content="#0b0b0b" />

/* 3) Фон задавай на html И body */
html, body {
height: 100%;
background: #0b0b0b; /* твой тёмный */
}

/* 4) Подскажи браузеру, что страница тёмная (влияет и на системные панели) */
:root { color-scheme: dark; }

/* 5) Исправь 100vh в iOS: */
body {
min-height: 100vh; /* базово */
min-height: 100svh; /* iOS 15+ / новые браузеры */
min-height: -webkit-fill-available; /* старые iOS как фолбек */
}

/* 6) Если есть фиксированные хедеры/футеры — учитывай вырез/домкнопку */
.safe-area {
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
}

Code

/* 3) Фон задавай на html И body */

html, body {

  height: 100%;

  background: #0b0b0b; /* твой тёмный */

}



/* 4) Подскажи браузеру, что страница тёмная (влияет и на системные панели) */

:root { color-scheme: dark; }



/* 5) Исправь 100vh в iOS: */

body {

  min-height: 100vh;          /* базово */

  min-height: 100svh;         /* iOS 15+ / новые браузеры */

  min-height: -webkit-fill-available; /* старые iOS как фолбек */

}



/* 6) Если есть фиксированные хедеры/футеры — учитывай вырез/домкнопку */

.safe-area {

  padding-top: env(safe-area-inset-top);

  padding-bottom: env(safe-area-inset-bottom);

}

Если у тебя PWA (добавляется на домашний экран), добавь ещё:

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

HTML

<meta name="apple-mobile-web-app-capable" content="yes" />

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

Куда класть в React:
- CRA/Vite — в public/index.html.
- Next.js — в _document.tsx/Head.

Чеклист:

- Фон задан и на html, и на body.
- Есть viewport-fit=cover.
- Есть theme-color (и для light/dark).
- Заменил 100vh → 100svh/100dvh или -webkit-fill-available.
- Обернул основной контейнер в .safe-area, если есть фикс. элементы.


Если не поможет — скинь ссылку/билд и версию iOS, гляну конкретно, где залипает белое, nevergonnadie.

ChatGPT,

куда это класть

nevergonnadie коротко: мета‑теги — в корневой HTML, CSS — в глобальные стили.

Если у тебя Vite/CRA (Create React App)
- Мета‑теги клади в: public/index.html

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<meta name="theme-color" content="#0b0b0b" />
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#0b0b0b" />
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#0b0b0b" />

HTML

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

<meta name="theme-color" content="#0b0b0b" />

<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#0b0b0b" />

<meta name="theme-color" media="(prefers-color-scheme: light)" content="#0b0b0b" />

- CSS клади в: src/index.css (или любой твой глобальный css) и убедись, что он импортируется в src/main.tsx|tsx или src/index.tsx|tsx.

html, body, #root {
height: 100%;
background: #0b0b0b;
}

:root { color-scheme: dark; }

body {
min-height: 100vh;
min-height: 100svh;
min-height: -webkit-fill-available;
}

.safe-area {
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
}

Code

html, body, #root {

  height: 100%;

  background: #0b0b0b;

}



:root { color-scheme: dark; }



body {

  min-height: 100vh;

  min-height: 100svh;

  min-height: -webkit-fill-available;

}



.safe-area {

  padding-top: env(safe-area-inset-top);

  padding-bottom: env(safe-area-inset-bottom);

}

Если Next.js
- App Router (Next 13+ с папкой app):
- Мета через metadata/viewport в app/layout.tsx:

export const viewport = {
width: 'device-width',
initialScale: 1,
viewportFit: 'cover',
};

export const metadata = {
themeColor: [
{ media: '(prefers-color-scheme: dark)', color: '#0b0b0b' },
{ media: '(prefers-color-scheme: light)', color: '#0b0b0b' },
],
};

Code

export const viewport = {

  width: 'device-width',

  initialScale: 1,

  viewportFit: 'cover',

};



export const metadata = {

  themeColor: [

    { media: '(prefers-color-scheme: dark)', color: '#0b0b0b' },

    { media: '(prefers-color-scheme: light)', color: '#0b0b0b' },

  ],

};

- Глобальные стили в app/globals.css (аналогично куску выше). Добавь ещё #__next:

html, body, #__next {
height: 100%;
background: #0b0b0b;
}

Code

html, body, #__next {

  height: 100%;

  background: #0b0b0b;

}

- Pages Router (pages/):
- Мета в pages/_document.tsx внутри <Head>:

<Head>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<meta name="theme-color" content="#0b0b0b" />
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#0b0b0b" />
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#0b0b0b" />
</Head>

Code

<Head>

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

  <meta name="theme-color" content="#0b0b0b" />

  <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#0b0b0b" />

  <meta name="theme-color" media="(prefers-color-scheme: light)" content="#0b0b0b" />

</Head>

- CSS в styles/globals.css, импорт в pages/_app.tsx.

Если styled-components — засунь CSS в GlobalStyle:

import { createGlobalStyle } from 'styled-components';

export const GlobalStyle = createGlobalStyle`
html, body, #root, #__next { height:100%; background:#0b0b0b; }
:root { color-scheme: dark; }
body { min-height:100vh; min-height:100svh; min-height:-webkit-fill-available; }
.safe-area {
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
}
`;

Code

import { createGlobalStyle } from 'styled-components';



export const GlobalStyle = createGlobalStyle`

  html, body, #root, #__next { height:100%; background:#0b0b0b; }

  :root { color-scheme: dark; }

  body { min-height:100vh; min-height:100svh; min-height:-webkit-fill-available; }

  .safe-area {

    padding-top: env(safe-area-inset-top);

    padding-bottom: env(safe-area-inset-bottom);

  }

`;

Дополнительно для PWA на iOS (если добавляют на дом. экран) — в тот же корневой HTML:

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

HTML

<meta name="apple-mobile-web-app-capable" content="yes" />

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

Если скажешь, чем именно собран проект (Vite/CRA/Next и какая версия) — кину готовые файлики, nevergonnadie.