CSS Style window background beyond page on Mac possible?

Question

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 bi

Answer 1

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

Answer 2

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.

Answer 3

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