I’m not sure exactly when this started happening, but the element(s) (I’m not familiar with HTML):
<section id="d-splash">
<template class="splash-svg-template">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<style>
:root {
--animation-state: paused;
}
/* user picked a theme where the "regular" scheme is dark */
:root {
--primary: #d9d9d9;
--secondary: #3d4147;
--tertiary: #fdd459;
--quaternary: #fdd459;
--highlight: #fdd459;
--success: #fdd459;
}
/* these styles need to live here because the SVG has a different scope */
.dots {
animation-name: loader;
animation-timing-function: ease-in-out;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-play-state: var(--animation-state);
stroke: #fff;
stroke-width: 0.5px;
transform-origin: center;
opacity: 0;
r: max(1vw, 11px);
cy: 50%;
filter: saturate(2) opacity(0.85);
}
.dots:first-child {
fill: var(--quaternary);
}
.dots:nth-child(2) {
fill: var(--quaternary);
animation-delay: 0.15s;
}
.dots:nth-child(3) {
fill: var(--highlight);
animation-delay: 0.3s;
}
.dots:nth-child(4) {
fill: var(--tertiary);
animation-delay: 0.45s;
}
.dots:nth-child(5) {
fill: var(--tertiary);
animation-delay: 0.6s;
}
@keyframes loader {
0% {
opacity: 0;
transform: scale(1);
}
45% {
opacity: 1;
transform: scale(0.7);
}
65% {
opacity: 1;
transform: scale(0.7);
}
100% {
opacity: 0;
transform: scale(1);
}
}
</style>
<g class="container">
<circle class="dots" cx="30vw"></circle>
<circle class="dots" cx="40vw"></circle>
<circle class="dots" cx="50vw"></circle>
<circle class="dots" cx="60vw"></circle>
<circle class="dots" cx="70vw"></circle>
</g>
</svg>
</template>
<style>
html {
overflow-y: hidden !important;
}
/* user picked a theme where the "regular" scheme is dark */
html {
background-color: #3d4147;
}
#d-splash .preloader-text-wrapper {
color: #d9d9d9;
}
#d-splash {
display: grid;
place-items: center;
backface-visibility: hidden;
position: absolute;
left: 0;
top: 0;
width: 100%;
z-index: 1001;
--animation-state: paused;
}
#d-splash .preloader-image {
max-width: 100%;
height: 100vh;
}
#d-splash .preloader-text-wrapper {
position: absolute;
opacity: 0;
animation: fade-in 0.5s ease-in-out;
animation-delay: 1s;
animation-fill-mode: forwards;
animation-play-state: var(--animation-state);
margin-bottom: -4em;
}
#d-splash .preloader-text:after {
animation: loading-text 3s infinite;
content: "";
position: absolute;
margin: 0 0.1em;
left: 100%;
}
.rtl #d-splash .preloader-text:after {
left: 0;
right: 100%;
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes loading-text {
0% {
content: "";
}
25% {
content: ".";
}
50% {
content: "..";
}
75% {
content: "...";
}
}
</style><style class="darkreader darkreader--sync" media="screen"></style>
<img class="preloader-image" src="data:image/svg;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="Developer Forum | Roblox">
<div class="preloader-text-wrapper">
<div class="preloader-text">Loading</div>
</div>
<script>// This script is inlined in `_discourse_splash.html.erb
const DELAY_TARGET = 2000;
const POLLING_INTERVAL = 50;
const splashSvgTemplate = document.querySelector(".splash-svg-template");
const splashTemplateClone = splashSvgTemplate.content.cloneNode(true);
const svgElement = splashTemplateClone.querySelector("svg");
const svgString = new XMLSerializer().serializeToString(svgElement);
const encodedSvg = btoa(svgString);
const splashWrapper = document.querySelector("#d-splash");
const splashImage = splashWrapper && splashWrapper.querySelector(".preloader-image");
if (splashImage) {
splashImage.src = "data:image/svg+xml;base64,".concat(encodedSvg);
const connectStart = performance.timing.connectStart || 0;
const targetTime = connectStart + DELAY_TARGET;
let splashInterval;
let discourseReady;
const swapSplash = () => {
splashWrapper && splashWrapper.style.setProperty("--animation-state", "running");
svgElement && svgElement.style.setProperty("--animation-state", "running");
const newSvgString = new XMLSerializer().serializeToString(svgElement);
const newEncodedSvg = btoa(newSvgString);
splashImage.src = "data:image/svg+xml;base64,".concat(newEncodedSvg);
performance.mark("discourse-splash-visible");
clearSplashInterval();
};
const clearSplashInterval = () => {
clearInterval(splashInterval);
splashInterval = null;
};
(() => {
splashInterval = setInterval(() => {
if (discourseReady) {
clearSplashInterval();
}
if (Date.now() > targetTime) {
swapSplash();
}
}, POLLING_INTERVAL);
})();
document.addEventListener("discourse-ready", () => {
discourseReady = true;
splashWrapper && splashWrapper.remove();
performance.mark("discourse-splash-removed");
}, {
once: true
});
}
</script>
</section>
being present will prevent me from scrolling, though I can click on most parts of the site without issue. I’ve tried using the element blockers in both Brave and UBlock Origin and neither have been able to resolve the issue and I have to manually remove it through inspect element every time I visit the site. My extensions are: RoPro, Roblox+, BTRoblox, Dark Reader, UBlock Origin, Adblock Plus, and ViolentMonkey (has no scripts relating to Roblox).