fix(client): Fix #6526

4 files changed, 22 insertions, 6 deletions

diff --git a/src/client/app.vue b/src/client/app.vue
index edf6a62371..519eff9ab0 100644
--- a/src/client/app.vue
+++ b/src/client/app.vue
@@ -375,7 +375,8 @@ export default Vue.extend({
 	$left-widgets-hide-threshold: 1600px;
 	$right-widgets-hide-threshold: 1090px;
 
-	min-height: 100vh;
+	// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
+	min-height: calc(var(--vh, 1vh) * 100);
 	box-sizing: border-box;
 	padding-top: $header-height;
 
@@ -544,7 +545,8 @@ export default Vue.extend({
 
 			> .content {
 				> * {
-					min-height: calc(100vh - #{$header-height});
+					// ほんとは単に calc(100vh - #{$header-height}) と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
+					min-height: calc((var(--vh, 1vh) * 100) - #{$header-height});
 					box-sizing: border-box;
 					padding: var(--margin);
 
@@ -597,7 +599,8 @@ export default Vue.extend({
 			&.fixed {
 				position: sticky;
 				overflow: auto;
-				height: calc(100vh - #{$header-height});
+				// ほんとは単に calc(100vh - #{$header-height}) と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
+				height: calc((var(--vh, 1vh) * 100) - #{$header-height});
 				top: $header-height;
 			}
 
@@ -620,7 +623,8 @@ export default Vue.extend({
 			> .container {
 				position: sticky;
 				height: min-content;
-				min-height: calc(100vh - #{$header-height});
+				// ほんとは単に calc(100vh - #{$header-height}) と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
+				min-height: calc((var(--vh, 1vh) * 100) - #{$header-height});
 				padding: var(--margin) 0;
 				box-sizing: border-box;
 
diff --git a/src/client/components/sidebar.vue b/src/client/components/sidebar.vue
index e926b4447e..558087f1d8 100644
--- a/src/client/components/sidebar.vue
+++ b/src/client/components/sidebar.vue
@@ -353,7 +353,8 @@ export default Vue.extend({
 			left: 0;
 			z-index: 1001;
 			width: $nav-width;
-			height: 100vh;
+			// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
+			height: calc(var(--vh, 1vh) * 100);
 			box-sizing: border-box;
 			overflow: auto;
 			background: var(--navBg);
diff --git a/src/client/deck.vue b/src/client/deck.vue
index 669719ba8e..0fe35d6026 100644
--- a/src/client/deck.vue
+++ b/src/client/deck.vue
@@ -211,7 +211,8 @@ export default Vue.extend({
 	--margin: var(--marginHalf);
 
 	display: flex;
-	height: 100vh;
+	// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
+	height: calc(var(--vh, 1vh) * 100);
 	box-sizing: border-box;
 	flex: 1;
 	padding: $deckMargin 0 $deckMargin $deckMargin;
diff --git a/src/client/init.ts b/src/client/init.ts
index 8a08267321..134285ca8e 100644
--- a/src/client/init.ts
+++ b/src/client/init.ts
@@ -59,6 +59,16 @@ if (localStorage.getItem('theme') == null) {
 	applyTheme(lightTheme);
 }
 
+//#region SEE: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
+// TODO: いつの日にか消したい
+const vh = window.innerHeight * 0.01;
+document.documentElement.style.setProperty('--vh', `${vh}px`);
+window.addEventListener('resize', () => {
+	const vh = window.innerHeight * 0.01;
+	document.documentElement.style.setProperty('--vh', `${vh}px`);
+});
+//#endregion
+
 //#region Detect the user language
 let lang = localStorage.getItem('lang');