From: Geoffrey Allott <geoffrey@allott.email>
Date: Tue, 27 Jun 2023 21:54:21 +0000 (+0100)
Subject: use "slice" for "preserveAspectRatio" to achieve desired effect on all browsers
X-Git-Url: https://git.pointlesshacks.com/?a=commitdiff_plain;h=2d3bf3efe84fd75685b3719ae577039b6eeb2898;p=pokerwave.git

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

diff --git a/site/modules/splash.js b/site/modules/splash.js
index 4230559..e88bbac 100644
--- 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 ac7c9da..51a84e1 100644
--- 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;
 }