diff --git a/public/css/character-group-overlay.css b/public/css/character-group-overlay.css
index 5ccbefd9b..b0d4b4a14 100644
--- a/public/css/character-group-overlay.css
+++ b/public/css/character-group-overlay.css
@@ -89,7 +89,7 @@
     position: absolute;
     width: 100%;
     height: 100vh;
-    height: 100svh;
+    height: 100dvh;
     z-index: 9998;
     top: 0;
 }
diff --git a/public/css/loader.css b/public/css/loader.css
index dea0eb5a3..acf82613d 100644
--- a/public/css/loader.css
+++ b/public/css/loader.css
@@ -7,8 +7,8 @@
     z-index: 999999;
     width: 100vw;
     height: 100vh;
-    width: 100svw;
-    height: 100svh;
+    width: 100dvw;
+    height: 100dvh;
     background-color: var(--SmartThemeBlurTintColor);
     color: var(--SmartThemeBodyColor);
     /*for some reason the full screen blur does not work on iOS*/
diff --git a/public/css/logprobs.css b/public/css/logprobs.css
index 4f129932a..0cea4f67f 100644
--- a/public/css/logprobs.css
+++ b/public/css/logprobs.css
@@ -1,7 +1,7 @@
 #logprobsViewer {
     overflow-y: auto;
-    max-width: 90svw;
-    max-height: 90svh;
+    max-width: 90dvw;
+    max-height: 90dvh;
     min-width: 100px;
     min-height: 50px;
     border-radius: 10px;
@@ -16,7 +16,7 @@
     top: 0;
     margin: 0;
     right: unset;
-    width: calc(((100svw - var(--sheldWidth)) / 2) - 1px);
+    width: calc(((100dvw - var(--sheldWidth)) / 2) - 1px);
 }
 
 .logprobs_panel_header {
diff --git a/public/css/mobile-styles.css b/public/css/mobile-styles.css
index dca2c8fe8..4280e8150 100644
--- a/public/css/mobile-styles.css
+++ b/public/css/mobile-styles.css
@@ -1,6 +1,8 @@
 /*will apply to anything 1000px or less. this catches ipads, horizontal phones, and vertical phones)*/
 @media screen and (max-width: 1000px) {
-    #send_form.compact #leftSendForm, #send_form.compact #rightSendForm {
+
+    #send_form.compact #leftSendForm,
+    #send_form.compact #rightSendForm {
         flex-wrap: nowrap;
         width: unset;
     }
@@ -30,9 +32,9 @@
         right: 0;
         width: fit-content;
         max-height: calc(60vh - 60px);
-        max-height: calc(60svh - 60px);
+        max-height: calc(60dvh - 60px);
         max-width: 90vw;
-        max-width: 90svw;
+        max-width: 90dvw;
         left: 50%;
         top: 50%;
         transform: translateX(-50%) translateY(-50%);
@@ -98,7 +100,7 @@
         min-width: unset;
         width: 100%;
         max-height: calc(100vh - 45px);
-        max-height: calc(100svh - 45px);
+        max-height: calc(100dvh - 45px);
         position: fixed;
         left: 0;
         top: 5px;
@@ -126,15 +128,15 @@
     #top-bar {
         position: fixed;
         width: 100vw;
-        width: 100svw;
+        width: 100dvw;
     }
 
     #bg1,
     #bg_custom {
         height: 100vh !important;
-        height: 100svh !important;
+        height: 100dvh !important;
         width: 100vw !important;
-        width: 100svw !important;
+        width: 100dvw !important;
         background-position: center;
 
     }
@@ -142,13 +144,7 @@
 
     #sheld,
     #character_popup,
-    .drawer-content
-
-    /* ,
-    #world_popup  */
-        {
-        /*max-height: calc(100vh - 36px);
-        max-height: calc(100svh - 36px);*/
+    .drawer-content {
         width: 100% !important;
         margin: 0 auto;
         max-width: 100%;
@@ -219,10 +215,10 @@
     #floatingPrompt,
     #cfgConfig,
     #logprobsViewer,
-    #movingDivs > div {
-        /* 100vh are fallback units for browsers that don't support svh */
+    #movingDivs>div {
+        /* 100vh are fallback units for browsers that don't support dvh */
         height: calc(100vh - 45px);
-        height: calc(100svh - 45px);
+        height: calc(100dvh - 45px);
         min-width: 100% !important;
         width: 100% !important;
         max-width: 100% !important;
@@ -245,7 +241,7 @@
     #floatingPrompt,
     #cfgConfig,
     #logprobsViewer,
-    #movingDivs > div {
+    #movingDivs>div {
         height: min-content;
     }
 
@@ -282,9 +278,9 @@
 
     body.waifuMode #sheld {
         height: 40vh;
-        height: 40svh;
+        height: 40dvh;
         top: 60vh;
-        top: 60svh;
+        top: 60dvh;
         bottom: 0 !important;
     }
 
@@ -321,16 +317,16 @@
     body.waifuMode .zoomed_avatar {
         width: fit-content;
         max-height: calc(60vh - 60px);
-        max-height: calc(60svh - 60px);
+        max-height: calc(60dvh - 60px);
         max-width: 90vw;
-        max-width: 90svw;
+        max-width: 90dvw;
     }
 
     .scrollableInner {
         overflow-y: auto;
         overflow-x: hidden;
         max-height: calc(100vh - 90px);
-        max-height: calc(100svh - 90px);
+        max-height: calc(100dvh - 90px);
     }
 
     .horde_multiple_hint {
@@ -366,9 +362,9 @@
 
     body:not(.waifuMode) .zoomed_avatar {
         max-height: calc(60vh - 60px);
-        max-height: calc(60svh - 60px);
+        max-height: calc(60dvh - 60px);
         max-width: 90vw;
-        max-width: 90svw;
+        max-width: 90dvw;
         left: 50%;
         top: 50%;
         transform: translateX(-50%) translateY(-50%);
@@ -449,9 +445,9 @@
         min-height: unset;
         max-height: unset;
         width: 100vw;
-        width: 100svw;
+        width: 100dvw;
         height: calc(100vh - 36px);
-        height: calc(100svh - 36px);
+        height: calc(100dvh - 36px);
         padding-right: max(env(safe-area-inset-right), 0px);
         padding-left: max(env(safe-area-inset-left), 0px);
         padding-bottom: 0;
@@ -481,10 +477,10 @@
         top: 0;
         margin: 0 auto;
         height: calc(100vh - 70px);
-        height: calc(100svh - 70px);
+        height: calc(100dvh - 70px);
         width: calc(100% - 5px);
         max-height: calc(100vh - 70px);
-        max-height: calc(100svh - 70px);
+        max-height: calc(100dvh - 70px);
         max-width: calc(100% - 5px);
 
     }
diff --git a/public/css/popup-safari-fix.css b/public/css/popup-safari-fix.css
index 6838e3352..e9dbdc7f9 100644
--- a/public/css/popup-safari-fix.css
+++ b/public/css/popup-safari-fix.css
@@ -7,5 +7,5 @@ body.safari .popup.large_dialogue_popup .popup-body {
 body.safari .popup .popup-body {
     height: fit-content;
     max-height: 90vh;
-    max-height: 90svh;
+    max-height: 90dvh;
 }
diff --git a/public/css/popup.css b/public/css/popup.css
index f05006749..6809d7248 100644
--- a/public/css/popup.css
+++ b/public/css/popup.css
@@ -16,8 +16,8 @@ dialog {
     display: flex;
     flex-direction: column;
 
-    max-height: calc(100svh - 2em);
-    max-width: calc(100svw - 2em);
+    max-height: calc(100dvh - 2em);
+    max-width: calc(100dvw - 2em);
     min-height: fit-content;
 
     /* Overflow visible so elements (like toasts) can appear outside of the dialog. '.popup-body' is hiding overflow for the real content. */
@@ -103,7 +103,7 @@ body.no-blur .popup[open]::backdrop {
 
 .popup #toast-container {
     /* Fix toastr in dialogs by actually placing it at the top of the screen via transform */
-    height: 100svh;
+    height: 100dvh;
     top: calc(50% + var(--topBarBlockSize));
     left: 50%;
     transform: translate(-50%, -50%);
@@ -115,7 +115,7 @@ body.no-blur .popup[open]::backdrop {
 .popup-crop-wrap {
     margin: 10px auto;
     max-height: 75vh;
-    max-height: 75svh;
+    max-height: 75dvh;
     max-width: 100%;
 }
 
diff --git a/public/css/toggle-dependent.css b/public/css/toggle-dependent.css
index 774e86089..387ce0b27 100644
--- a/public/css/toggle-dependent.css
+++ b/public/css/toggle-dependent.css
@@ -360,7 +360,7 @@ body.waifuMode #top-bar {
 
 body.waifuMode #sheld {
     height: 40vh;
-    height: 40svh;
+    height: 40dvh;
     top: calc(100% - 40vh);
     bottom: 0;
 }
diff --git a/public/scripts/extensions/quick-reply/style.css b/public/scripts/extensions/quick-reply/style.css
index c27d89fd3..2a7774924 100644
--- a/public/scripts/extensions/quick-reply/style.css
+++ b/public/scripts/extensions/quick-reply/style.css
@@ -231,8 +231,8 @@
     flex-direction: column;
   }
   body .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder {
-    min-height: 50svh;
-    height: 50svh;
+    min-height: 50dvh;
+    height: 50dvh;
   }
 }
 .popup:has(#qr--modalEditor) {
diff --git a/public/scripts/extensions/quick-reply/style.less b/public/scripts/extensions/quick-reply/style.less
index e2a0e64fe..8b2f13524 100644
--- a/public/scripts/extensions/quick-reply/style.less
+++ b/public/scripts/extensions/quick-reply/style.less
@@ -297,8 +297,8 @@
         }
 
         >#qr--main>.qr--modal-messageContainer>#qr--modal-messageHolder {
-            min-height: 50svh;
-            height: 50svh;
+            min-height: 50dvh;
+            height: 50dvh;
         }
     }
 }
diff --git a/public/style.css b/public/style.css
index 95a61cdae..23da460d9 100644
--- a/public/style.css
+++ b/public/style.css
@@ -137,7 +137,6 @@ body {
     width: 100%;
     /*fallback for JS load*/
     height: 100vh;
-    height: 100svh;
     height: 100dvh;
     /*defaults as 100%, then reassigned via JS as pixels, will work on PC and Android*/
     /*height: calc(var(--doc-height) - 1px);*/
@@ -451,7 +450,7 @@ code {
     border-radius: 5px;
     background-color: var(--black70a);
     padding: 0 3px;
-    /* max-width: calc(100svw - 95px); */
+    /* max-width: calc(100dvw - 95px); */
     line-height: var(--mainFontSize);
     color: var(--white70a);
 }
@@ -535,13 +534,13 @@ body.reduced-motion #bg_custom {
     flex-direction: column;
     /* -1px to give sheld some wiggle room to bounce off tobar when moving*/
     height: calc(100vh - var(--topBarBlockSize) - 1px);
-    height: calc(100svh - var(--topBarBlockSize) - 1px);
-    max-height: calc(100svh - var(--topBarBlockSize) - 1px);
+    height: calc(100dvh - var(--topBarBlockSize) - 1px);
+    max-height: calc(100dvh - var(--topBarBlockSize) - 1px);
     overflow-x: hidden;
     /* max-width: 50vw; */
     position: absolute;
     left: calc((100vw - var(--sheldWidth))/2);
-    left: calc((100svw - var(--sheldWidth))/2);
+    left: calc((100dvw - var(--sheldWidth))/2);
     top: var(--topBarBlockSize);
     margin: 0 auto;
     left: 0;
@@ -1160,12 +1159,12 @@ textarea {
     font-family: var(--mainFontFamily);
     padding: 5px 10px;
     max-height: 90vh;
-    max-height: 90svh;
+    max-height: 90dvh;
 }
 
 textarea.autoSetHeight {
     max-height: 50vh;
-    max-height: 50svh;
+    max-height: 50dvh;
 }
 
 input,
@@ -1179,7 +1178,7 @@ select {
     min-height: calc(var(--bottomFormBlockSize) + 2px);
     height: calc(var(--bottomFormBlockSize) + 2px);
     max-height: 50vh;
-    max-height: 50svh;
+    max-height: 50dvh;
     word-wrap: break-word;
     resize: vertical;
     display: block;
@@ -2111,14 +2110,14 @@ textarea::placeholder {
 @media screen and (max-width: 1000px) {
     #form_create textarea {
         flex-grow: 1;
-        min-height: 20svh;
+        min-height: 20dvh;
     }
 }
 
 @media screen and (min-width: 1001px) {
     #description_textarea {
         height: 29vh;
-        height: 29svh;
+        height: 29dvh;
     }
 
     #firstmessage_textarea {
@@ -2394,8 +2393,8 @@ input[type="file"] {
 #floatingPrompt,
 #cfgConfig {
     overflow-y: auto;
-    max-width: 90svw;
-    max-height: 90svh;
+    max-width: 90dvw;
+    max-height: 90dvh;
     min-width: 100px;
     min-height: 100px;
     border-radius: 10px;
@@ -2411,7 +2410,7 @@ input[type="file"] {
     top: 0;
     margin: 0;
     right: unset;
-    width: calc(((100svw - var(--sheldWidth)) / 2) - 1px);
+    width: calc(((100dvw - var(--sheldWidth)) / 2) - 1px);
 
 }
 
@@ -2768,7 +2767,7 @@ input[type=search]:focus::-webkit-search-cancel-button {
     flex-wrap: wrap;
     width: calc(var(--sheldWidth) - 10px);
     max-width: 100vw;
-    max-width: 100svw;
+    max-width: 100dvw;
     justify-content: space-evenly;
 }
 
@@ -3123,7 +3122,7 @@ grammarly-extension {
 #dialogue_popup {
     width: 500px;
     max-width: 90vw;
-    max-width: 90svw;
+    max-width: 90dvw;
     position: absolute;
     z-index: 9999;
     margin-left: auto;
@@ -3139,7 +3138,7 @@ grammarly-extension {
     background-color: var(--SmartThemeBlurTintColor);
     border-radius: 10px;
     max-height: 90vh;
-    max-height: 90svh;
+    max-height: 90dvh;
     display: flex;
     flex-direction: column;
     overflow-y: hidden;
@@ -3153,9 +3152,9 @@ grammarly-extension {
 
 .large_dialogue_popup {
     height: 90vh !important;
-    height: 90svh !important;
+    height: 90dvh !important;
     max-width: 90vw !important;
-    max-width: 90svw !important;
+    max-width: 90dvw !important;
 }
 
 .wide_dialogue_popup {
@@ -3307,7 +3306,7 @@ grammarly-extension {
     position: absolute;
     width: 100%;
     height: 100vh;
-    height: 100svh;
+    height: 100dvh;
     z-index: 9999;
     top: 0;
 }
@@ -3315,9 +3314,9 @@ grammarly-extension {
 #bgtest {
     display: none;
     width: 100vw;
-    width: 100svw;
+    width: 100dvw;
     height: 100vh;
-    height: 100svh;
+    height: 100dvh;
     position: absolute;
     z-index: -100;
     background-color: red;
@@ -3954,7 +3953,7 @@ input[type="range"]::-webkit-slider-thumb {
     position: absolute;
     width: 100%;
     height: 100vh;
-    height: 100svh;
+    height: 100dvh;
     z-index: 2058;
 }
 
@@ -3967,11 +3966,11 @@ input[type="range"]::-webkit-slider-thumb {
     min-width: 100px;
     max-width: var(--sheldWidth);
     height: calc(100vh - 84px);
-    height: calc(100svh - 84px);
+    height: calc(100dvh - 84px);
     min-height: calc(100vh - 84px);
-    min-height: calc(100svh - 84px);
+    min-height: calc(100dvh - 84px);
     max-height: calc(100vh - 84px);
-    max-height: calc(100svh - 84px);
+    max-height: calc(100dvh - 84px);
     position: absolute;
     z-index: 4001;
     margin-left: auto;
@@ -4050,7 +4049,7 @@ h5 {
     position: absolute;
     width: 100%;
     height: 100vh;
-    height: 100svh;
+    height: 100dvh;
     z-index: 4100;
     top: 0;
     background-color: var(--black70a);
@@ -4064,7 +4063,7 @@ h5 {
     max-width: var(--sheldWidth);
     height: min-content;
     max-height: calc(100vh - var(--topBarBlockSize));
-    max-height: calc(100svh - var(--topBarBlockSize));
+    max-height: calc(100dvh - var(--topBarBlockSize));
     min-height: 100px;
     position: absolute;
     z-index: 2066;
@@ -4384,14 +4383,14 @@ a {
     overflow-wrap: break-word;
     white-space: normal;
     max-width: calc(((100vw - 500px) / 2) - 10px);
-    max-width: calc(((100svw - 500px) / 2) - 10px);
+    max-width: calc(((100dvw - 500px) / 2) - 10px);
     position: absolute;
     z-index: 9999;
     max-height: 90vh;
-    max-height: 90svh;
+    max-height: 90dvh;
     /*unsure why, but this prevents scrollbars*/
     height: 49vh;
-    height: 49svh;
+    height: 49dvh;
 
     padding: 5px;
     overflow-y: auto;
@@ -4427,11 +4426,11 @@ a {
 
 #right-nav-panel {
     width: calc((100vw - var(--sheldWidth) - 2px) /2);
-    width: calc((100svw - var(--sheldWidth) - 2px) /2);
+    width: calc((100dvw - var(--sheldWidth) - 2px) /2);
     max-height: calc(100vh - var(--topBarBlockSize));
-    max-height: calc(100svh - var(--topBarBlockSize));
+    max-height: calc(100dvh - var(--topBarBlockSize));
     height: calc(100vh - var(--topBarBlockSize));
-    height: calc(100svh - var(--topBarBlockSize));
+    height: calc(100dvh - var(--topBarBlockSize));
     position: fixed;
     top: 0;
     margin: 0;
@@ -4484,7 +4483,7 @@ a {
     border-radius: 10px;
     max-width: 100%;
     max-height: 40vh;
-    max-height: 40svh;
+    max-height: 40dvh;
     image-rendering: -webkit-optimize-contrast;
 }
 
@@ -4576,18 +4575,18 @@ body:not(.caption) .mes_img_caption {
 
 .img_enlarged_container pre {
     max-height: 25vh;
-    max-height: 25svh;
+    max-height: 25dvh;
     flex-shrink: 0;
     overflow: auto;
 }
 
 .popup:has(.img_enlarged.zoomed).large_dialogue_popup {
     height: 100vh !important;
-    height: 100svh !important;
+    height: 100dvh !important;
     max-height: 100vh !important;
-    max-height: 100svh !important;
+    max-height: 100dvh !important;
     max-width: 100vw !important;
-    max-width: 100svw !important;
+    max-width: 100dvw !important;
     padding: 0;
 }
 
@@ -4774,7 +4773,7 @@ body:has(#character_popup.open) #top-settings-holder:has(.drawer-content.openDra
     width: var(--sheldWidth);
     overflow-y: auto;
     max-height: calc(100vh - calc(var(--topBarBlockSize) + var(--bottomFormBlockSize)));
-    max-height: calc(100svh - calc(var(--topBarBlockSize) + var(--bottomFormBlockSize)));
+    max-height: calc(100dvh - calc(var(--topBarBlockSize) + var(--bottomFormBlockSize)));
     display: none;
     position: absolute;
     top: var(--topBarBlockSize);
@@ -4809,11 +4808,11 @@ body:not(.movingUI) .drawer-content.maximized {
 
 .fillLeft {
     width: calc((100vw - var(--sheldWidth) - 2px) /2);
-    width: calc((100svw - var(--sheldWidth) - 2px) /2);
+    width: calc((100dvw - var(--sheldWidth) - 2px) /2);
     height: calc(100vh - var(--topBarBlockSize));
-    height: calc(100svh - var(--topBarBlockSize));
+    height: calc(100dvh - var(--topBarBlockSize));
     max-height: calc(100vh - var(--topBarBlockSize));
-    max-height: calc(100svh - var(--topBarBlockSize));
+    max-height: calc(100dvh - var(--topBarBlockSize));
     position: fixed;
     top: 0;
     margin: 0;
@@ -5063,7 +5062,7 @@ body:not(.movingUI) .drawer-content.maximized {
     width: 100%;
     /* margin-inline: 10px; */
     max-height: 90vh;
-    max-width: 90svh;
+    max-width: 90dvh;
 }
 
 .zoomed_avatar img {