Unable to scroll due to website element

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).

2 Likes

This is because of one of the CSS selectors applied to the <html> tag blocks for scrolling vertically. The selector in this case would be:

html {
    overflow-y: hidden !important;
}

From the MDN docs:

hidden: Overflow content is clipped if necessary to fit vertically in the elements’ padding box. No scroll bars are provided.

If needed, you can make a javascript snippet you can include in your userscript manager to remove the selector.

2 Likes

Oh man I do not understand what a lot of this means. How would I go about doing that last part?

2 Likes

Took me forever to figure it out, but I put

document.getElementById("d-splash").remove();

into the Chrome extension Custom JavaScript for Websites 2 and it solved the problem. If anyone else comes across this note that there are other extensions and likely other methods of doing this.

1 Like