Robot bleeds into non-maximized page

Question

I was visiting the site and noticed a weird blur along the left margin.

Turns out this is apparently the robot's shadow, which somehow ends up being rendered on the page even when I can't see the robot itself.

I have "Hide left navigation" (and "Disable top bar stickiness" if it matters) checked in my network-wide preferences.

This looks vaguely like the site was designed exclusively for people with big screens with nothing else to put on them. I always keep multiple browser windows open side by side, and don't even think they are particularly narrow (this one is over 2300 pixels wide, including the browser's tiny amount of chrome; but this is a Retina display, so I guess the browser's viewport is actually only something like 1150 pixels wide) but apparently it's too small to accommodate this site as designed.

I can get rid of the shadow if I stretch the window so it covers almost the full width of my 15" display (the resulting screenshot is almost 4000 pixels wide; then, these artifacts land outside the text column, and I can actually see the robot that they belong to.

Is there any way this could be disabled, or the site redesigned to accommodate visitors who are not running the browser always maximized on a large display?

Answer 1

I can reproduce this when I resize my browser window:

The background colour of the content div is set to rgba(255, 255, 255, 0.95) so, it's 5% transparent. Therefore, you will always see part of the overall background through that.

Interestingly, there are two CSS rules for #content in the same primary.css file. The first one is

#content {
 box-sizing:content-box;
 margin:0 auto;
 padding:15px;
 width:1264px;
 background-color:#fff
}

Which defines the background to be a solid white colour but the second one overrides the first one with a slightly transparent background:

#content {
 max-width:1100px;
 width:calc(100% - 164px);
 background-color:rgba(255,255,255,0.95);
 border-radius:5px;
 border:1px solid var(--black-100);
 border-top-width:0;
 border-bottom-width:0;
 border-left-width:0;
 border-right-width:0;
 padding:24px;
 box-sizing:border-box
}

If you have an addon that allows you to define user styles (I personally use Stylus) then you can add a stylesheet for the site with

#content {
    background-color: #fff
}

Here is a ready made rule for the worldbuilding sites that can be imported with Stylus:

@-moz-document domain("worldbuilding.meta.stackexchange.com"), domain("worldbuilding.stackexchange.com") {
#content {
    background-color: #fff
}
}

Which results in this:

If you prefer a userscript instead, then this can work:

// ==UserScript==
// @name        Make the worldbuilding background solid
// @namespace   Worldbuilding.SE
// @match       https://worldbuilding.meta.stackexchange.com/*
// @match       https://worldbuilding.stackexchange.com/*
// @grant       none
// @version     1.0
// @description Change the background to a completely solid color and remove the transparency.
// ==/UserScript==
const newStyle = document.createElement('style');
newStyle.type = 'text/css';
newStyle.innerHTML = "#content { background-color: #fff }";

document.head.appendChild(newStyle);