4

It seems that recently (in version 15?) Safari for macOS changed the way it chooses the background color outside of the viewport, i.e. the color of the parts of the page that become visible only when scrolling above/below the borders of the viewport. I found that this color is determined by <meta> tag with the name "theme-color" if it exists. However, I do not understand which part of the page controls this color if theme-color meta-tag does not exist. Specifically, I don't understand why this color on this page is blue.

Screenshot with blue overscroll

I use Safari version 15.4 (17613.1.17.1.13), macOS Monterey (12.3.1).

Ilya V. Schurov
  • 7,687
  • 2
  • 40
  • 78

1 Answers1

6

It's a New WebKit Feature in Safari 15 on macOS Monterey and Big Sur and iPadOS 15

WebKit now provides support for theme-color in HTML meta tags, and in Web Manifest. By specifying a theme-color, web developers can change the color of the status bar and overscroll area in Safari on iOS 15.

Specifically, on the mentioned webpage, it is specified in manifest.webmanifest file

{
    "theme_color": "#0000ff"
}

linked from index.html:

<link rel="manifest" href="manifest.webmanifest">

Note that if the color is not specified, this feature works like magic. To find out exactly how this feature works, you need to look at the source code of WebKit.

For sites that don`t provide a color, Safari will figure out a color to use. Sometimes Safari matches the background color of the web page. Other times, it matches the header background. Design for Safari

Ilya V. Schurov
  • 7,687
  • 2
  • 40
  • 78
MTpH9
  • 304
  • 2
  • 10
  • 1
    Thanks! The first reference is what I was looking for: it mentions that color can be specified in manifest file. I found that the blueish color is mentioned in `manifest.webmanifest`. Removed it there and overscroll background disappeared! Updated your answer to explain all the details. Also, reproduced testcase on a separate page. – Ilya V. Schurov Apr 14 '22 at 19:33