From 4acf2394e6bd6fb8538af676b7ba442bf9a5bfe4 Mon Sep 17 00:00:00 2001
From: Joe <33972521+hnb-ku@users.noreply.github.com>
Date: Tue, 5 Jul 2022 22:41:43 +0800
Subject: [PATCH] UX: Prevent overlap between splash loader and splash text on
 some browsers (#17340)

Context: https://meta.discourse.org/t/show-a-loader-starting-page-for-slow-connections/42981/23?u=johani

Not all browsers respect padding on absolute elements.

There are no visual/function changes. This PR just changes the implementation to prevent the overlap on some browsers.
---
 app/views/common/_discourse_splash.html.erb | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/app/views/common/_discourse_splash.html.erb b/app/views/common/_discourse_splash.html.erb
index fbe8ac931c9..ea7b952e57f 100644
--- a/app/views/common/_discourse_splash.html.erb
+++ b/app/views/common/_discourse_splash.html.erb
@@ -24,8 +24,7 @@
       height: 100vh;
     }
 
-    #d-splash .preloader-text {
-      padding-top: 4em;
+    #d-splash .preloader-text-wrapper {
       position: absolute;
       opacity: 0;
       animation: fade-in 0.5s ease-in-out;
@@ -35,11 +34,14 @@
       color: var(--primary);
     }
 
+    #d-splash .preloader-text {
+      padding-top: 4em;
+    }
+
     #d-splash .preloader-text:after {
       animation: loading-text 3s infinite;
       content: "";
       position: absolute;
-      top: 4em;
       margin: 0 0.1em;
       left: 100%;
     }
@@ -80,8 +82,8 @@
     alt="<%=SiteSetting.title%>"
   />
 
-  <div class="preloader-text">
-    <span> <%= I18n.t("js.preloader_text") %> </span>
+  <div class="preloader-text-wrapper">
+    <div class="preloader-text"><%= I18n.t("js.preloader_text") %></div>
   </div>
 
   <noscript>