6

Is it possible to style or color the window pane background of the browser?
When scrolling beyond the edge in Chrome and Safari on Mac,
the whole page is pulled a bit down and/or sideways.

It shows a basic canvas style of texture,
is it possible to style that region (with CSS) ?

Edit: i found a (crude) way to prevent the overscrolling entirely,
but i'm looking for a way to set a color or texture, to match the overall design.
Prevent "overscrolling" of web page

Scroll beyond page edge

Community
  • 1
  • 1
GDmac
  • 880
  • 1
  • 9
  • 28
  • Does this help? http://apple.stackexchange.com/a/47125 – Hashem Qolami Mar 18 '14 at 11:22
  • That is rather permanent, lol. I hoped to find a solution for websites, to be able to set it to a color or texture, matching the overall design. – GDmac Mar 18 '14 at 11:27
  • Well, I'm not a MAC user, but I think this things are related to the Browsers themselves, in this case Safari. Please correct me if I'm wrong. – Hashem Qolami Mar 18 '14 at 11:29

4 Answers4

16

probably this is not needed anymore but maybe someone else wants to do the same :D

this should put a background-color on the overscroll-area of any ios device

body:after {
    content: '';
    position: fixed;
    top: -50%;
    right: -50%;
    bottom: -50%;
    left: -50%;
    z-index: -1;
    background: #000000;
}

here is the link to my gist

Simon Rothert
  • 402
  • 6
  • 12
  • In my brief (desktop) testing: this is needed still on Safari. Chrome, however, works with a `background-color` set on `body`. Firefox seems to be a bit smarter and uses whatever background is currently in front. (Neither the Safari or the Chrome approach above work for Firefox.) – derpedy-doo Nov 08 '21 at 15:41
1

Unfortunately this is not possible. This is part of the application (Safari) and can not be styled with webpages.

Paranoia
  • 2,040
  • 5
  • 25
  • 27
1

Set the body colour body {background-color: white} should work.

More complex, if you need to change the overscroll colour, while leaving the body colour white (only tested on iOS10.3 Safari). I did the following using a 1x1 white pixel:

body {
    background-color: rgba(0, 0, 0, 0.4);
    background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAP7//wAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==);
    background-size: 100% 100%;
}

FYI 1: three other things I tried that didn't work for me were: outline: 100px solid rgba(0, 0, 0, 0.4);, box-shadow: 0 0 0 100px rgba(0, 0, 0, 0.4);, and background: #FFF, rgba(0, 0, 0, 0.4);.

FYI 2: I recall that really old versions of Safari needed the colour set on the html element.

robocat
  • 5,293
  • 48
  • 65
1

You can now do this with a meta tag:

<meta name="theme-color" content="#923941">
syntaxerror748
  • 93
  • 6