able to scroll past html content into white background-CodePudding

body {
  margin: 0;
  width: 100vw;
  font-family: "Mona Sans";
  background: var(--color-bg);
  display: grid;
  overflow-y: scroll;
  overflow-x: hidden;

  scrollbar-width: none; /* Firefox */
}

body::-webkit-scrollbar {
  display: none;
}

html {
  width: 100vw;
  overflow-x: hidden;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: "Mona Sans";
}

Not sure how to change this color to match the background, this only happens on my macbook and not my windows pc.

video of what i'm describing

CodePudding user response：

I believe this is actually to do with the theme-color meta tag

Example:
meta name="theme-color" content="#4285f4" />

Here's an excerpt from the index.html file I use on my portfolio site:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- Meta tags for Colou Schemes -->
    <meta name="color-scheme" content="light dark" />
    <meta
      name="theme-color"
      content="#FFFFFF"
      media="(prefers-color-scheme: light)"
    />
    <meta
      name="theme-color"
      content="#000000"
      media="(prefers-color-scheme: dark)"
    />
  </head>
...