6
$\begingroup$

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

Screen shot of blurred shadow

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?

$\endgroup$
3
  • $\begingroup$ Maybe this has something to do with your browser? I don't have a little traffic light in the corner, and I don't see anything in Opera like what you're seeing no matter what I do to the pane. $\endgroup$ – elemtilas Jul 27 '20 at 20:37
  • $\begingroup$ The "traffic lights" are the standard MacOS window decorations, This is on Iridium which is basically Chrome, but I can also repro in Firefox. $\endgroup$ – tripleee Jul 28 '20 at 4:19
  • $\begingroup$ I tested in anonymous mode; when I'm not logged in, the "Home - Questions - Tags - Users - Unanswered" menu-like thingy down the left side stays open. So I guess part of my crime is closing that waste of screen real estate in my preferences. $\endgroup$ – tripleee Jul 28 '20 at 4:22
3
$\begingroup$

I can reproduce this when I resize my browser window:

Screenshot showing the same see-through behaviour as the question where the robot Slartybartfast can be seen vaguely through the background

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:

Screenshot where the robot Slartybartfast is not visible behind the background

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);
$\endgroup$
5
  • $\begingroup$ Thanks for the workarounds, but surely this is a bug which should simply be fixed? $\endgroup$ – tripleee Jul 28 '20 at 5:47
  • $\begingroup$ I am not sure if it's a bug or a feature. It's for others to decide. It may as well have been intentional design decision. All I can do is provide workarounds for now and hopefully if it is a bug it does get fixed. At least there is something in the meantime for it. $\endgroup$ – VLAZ Jul 28 '20 at 5:49
  • $\begingroup$ I couldn't reproduce the effect even when trying anonymously in a different browser. Odd. $\endgroup$ – elemtilas Jul 28 '20 at 10:44
  • $\begingroup$ @elemtilas Perhaps your monitor brightness is high or contrast low? The background only has a very slight transparency, so it might be hard to see in some cases. The only other thing I can think of is your browser rendering it as solid, perhaps for some reason. $\endgroup$ – VLAZ Jul 28 '20 at 10:47
  • $\begingroup$ @VLAZ -- opposite, actually. Brightness is low-medium; contrast is high-medium. Like I said, I can't reproduce the effect on a couple different browsers, signed in or anonymously. I still think it's something to do with the OP's settings, especially with the robot over top of the text that way. Anyway, I think I've given my tuppence on this topic! $\endgroup$ – elemtilas Jul 28 '20 at 21:31

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .