Fix perspective Chrome 94 change

ManzDev · Sep 24, 2021 · 94dd19e · 94dd19e
1 parent 8c81432
commit 94dd19e
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 19 deletions.
diff --git a/src/components/TARSBlock.js b/src/components/TARSBlock.js
@@ -22,7 +22,6 @@ class TARSBlock extends HTMLElement {
         position: relative;
         perspective: 8000px;
         transform-style: preserve-3d;
-        /* transform: rotateX(15deg) rotateY(15deg); */
       }
 
       .face-1, .face-2, .face-5, .face-6 {
@@ -33,6 +32,8 @@ class TARSBlock extends HTMLElement {
         width: var(--width);
         height: var(--height);
         position: absolute;
+        perspective: 8000px;
+        transform-style: preserve-3d;
       }
 
       /* right face */

diff --git a/src/components/TARSFaceMain.js b/src/components/TARSFaceMain.js
@@ -37,13 +37,20 @@ class TARSFaceMain extends HTMLElement {
         position: relative;
       }
 
+      .black.screen > p {
+        transform: translate(0, 4px);
+        margin: 0;
+        padding: 0;
+      }
+
       .black.screen::before {
         content: "";
         width: 100%;
         height: 20%;
         display: block;
         background: #222a;
         z-index: 2;
+        position: absolute;
       }
 
       .text {
@@ -94,29 +101,31 @@ class TARSFaceMain extends HTMLElement {
   }
 
   getTerminalText() {
-    return `
+    return /* html */`
       <div class="joke"></div>
-      Welcome to TARS Corporation (TM) Terminal
-      Copyright (C) 2984-2987, TARS Corp. Software
-      OS version: 22A1-9166-69
+      <p>
+        Welcome to TARS Corporation (TM) Terminal
+        Copyright (C) 2984-2987, TARS Corp. Software
+        OS version: 22A1-9166-69
 
-      Initializing...
-      ==================================
+        Initializing...
+        ==================================
 
-      Memory Test: 281474976710656B OK
+        Memory Test: 281474976710656B OK
 
-      Auto-Detecting modules ... TARS "H@CK-MODULE" found!
+        Auto-Detecting modules ... TARS "H@CK-MODULE" found!
 
-      Searching for devices nearby...
-      ==================================
+        Searching for devices nearby...
+        ==================================
 
-      Please choose an option:
+        Please choose an option:
 
-       (1) "Stellar Coffee"
-       (2) "Hack the box with S4vitaar"
-       (3) "CSS with ManzDev"
+        (1) "Stellar Coffee"
+        (2) "Hack the box with S4vitaar"
+        (3) "CSS with ManzDev"
 
-       What is your choice: _`;
+        What is your choice: _
+      </p>`;
   }
 
   connectedCallback() {

diff --git a/src/components/TARSRobot.js b/src/components/TARSRobot.js
@@ -14,7 +14,7 @@ class TARSRobot extends HTMLElement {
         justify-content: center;
         transform: rotateY(20deg);
         transform-style: preserve-3d;
-        perspective: 8000px;
+        perspective: 250000px;
         gap: 4px;
       }
 

diff --git a/src/index.css b/src/index.css
@@ -10,7 +10,8 @@ body {
   display: flex;
   flex-direction: column;
   align-items: center;
-  perspective: 900px;
+
+  /* perspective: 900px; */
 }
 
 .buttons {
@@ -27,7 +28,7 @@ body {
   border-radius: 10px;
   color: #eee;
   box-shadow: 0 7px 0 #0863a5, 0 8px 3px rgb(0 0 0 / 30%);
-  transition: all .25s;
+  transition: all 0.25s;
   cursor: pointer;
 }