use "slice" for "preserveAspectRatio" to achieve desired effect on all browsers

diff --git a/site/modules/splash.js b/site/modules/splash.js
index 4230559f5c31fa0accb2796d0b96b0522cc181f0..e88bbac9644360fcdc0f49409d6d6038dceac1cd 100644 (file)
--- a/site/modules/splash.js
+++ b/site/modules/splash.js
@@ -54,7 +54,7 @@ class CardWave {
 export class SplashScreen {
     constructor(container) {
         this.container = container;
-        this.svg = create_svg_element(container, "svg", ["splash-screen"], [["viewBox", "0 0 2000 500"]]);
+        this.svg = create_svg_element(container, "svg", ["splash-screen"], [["viewBox", "0 0 2000 500"], ["preserveAspectRatio", "xMidYMid slice"]]);
         this.hidden = false;
 
         this.upper_bar = create_svg_element(this.svg, "rect", ["splash-upper-bar"], [["x", "0"], ["y", "-10"], ["width", "2000"], ["height", "105"], ["fill", "#000064"], ["stroke", "skyblue"], ["stroke-width", "4px"]]);

diff --git a/site/style.css b/site/style.css
index ac7c9da7cdaad430bc606bbd94042c689742c360..51a84e188c01397ae5d9b91a2402724a548599be 100644 (file)
--- a/site/style.css
+++ b/site/style.css
@@ -48,12 +48,12 @@ html, body {
 }
 
 #splash-background {
-    width: 700%;
+    width: 100%;
     height: 100%;
     display: grid;
     grid: 1fr / 1fr;
     top: 0;
-    left: -300%;
+    left: 0;
     position: absolute;
     overflow: clip;
 }