From e393ab6044074a00c1158881effaf2b35702d5ab Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 3 Jul 2022 16:17:31 +0900
Subject: [PATCH] fix(client): style tweak for ios

---
 .../src/components/drive-file-thumbnail.vue   |  2 +-
 packages/client/src/components/form/range.vue |  2 +-
 packages/client/src/components/marquee.vue    |  2 +-
 .../client/src/components/note-preview.vue    |  2 +-
 .../client/src/components/note-simple.vue     |  2 +-
 packages/client/src/components/note.vue       |  2 +-
 packages/client/src/components/tag-cloud.vue  |  2 +-
 packages/client/src/components/toast.vue      |  2 +-
 packages/client/src/components/ui/button.vue  |  2 +-
 .../client/src/components/ui/container.vue    | 25 ++++++++++---------
 packages/client/src/components/ui/modal.vue   |  2 +-
 packages/client/src/pages/about-misskey.vue   |  2 +-
 packages/client/src/pages/about.vue           |  2 +-
 packages/client/src/pages/admin/overview.vue  |  4 +--
 .../client/src/pages/antenna-timeline.vue     |  2 +-
 .../client/src/pages/settings/profile.vue     |  2 +-
 packages/client/src/pages/settings/theme.vue  |  2 +-
 packages/client/src/pages/timeline.vue        |  2 +-
 .../client/src/pages/user-list-timeline.vue   |  2 +-
 .../client/src/pages/user/index.photos.vue    |  2 +-
 .../client/src/pages/welcome.entrance.a.vue   |  2 +-
 packages/client/src/style.scss                |  2 +-
 .../client/src/ui/_common_/statusbars.vue     |  2 +-
 packages/client/src/ui/classic.vue            |  2 +-
 24 files changed, 37 insertions(+), 36 deletions(-)

diff --git a/packages/client/src/components/drive-file-thumbnail.vue b/packages/client/src/components/drive-file-thumbnail.vue
index b346585cec..16c77f7267 100644
--- a/packages/client/src/components/drive-file-thumbnail.vue
+++ b/packages/client/src/components/drive-file-thumbnail.vue
@@ -59,7 +59,7 @@ const isThumbnailAvailable = computed(() => {
 	display: flex;
 	background: var(--panel);
 	border-radius: 8px;
-	overflow: clip;
+	overflow: hidden; overflow: clip;
 
 	> .icon-sub {
 		position: absolute;
diff --git a/packages/client/src/components/form/range.vue b/packages/client/src/components/form/range.vue
index 387ad26f3d..f87b92183d 100644
--- a/packages/client/src/components/form/range.vue
+++ b/packages/client/src/components/form/range.vue
@@ -189,7 +189,7 @@ const onMousedown = (ev: MouseEvent | TouchEvent) => {
 				height: 3px;
 				background: rgba(0, 0, 0, 0.1);
 				border-radius: 999px;
-				overflow: clip;
+				overflow: hidden; overflow: clip;
 
 				> .highlight {
 					position: absolute;
diff --git a/packages/client/src/components/marquee.vue b/packages/client/src/components/marquee.vue
index 4685033517..e7d6f20ed5 100644
--- a/packages/client/src/components/marquee.vue
+++ b/packages/client/src/components/marquee.vue
@@ -76,7 +76,7 @@ export default {
 
 <style lang="scss" module>
 .wrap {
-	overflow: clip;
+	overflow: hidden; overflow: clip;
 }
 .content {
 	display: inline-block;
diff --git a/packages/client/src/components/note-preview.vue b/packages/client/src/components/note-preview.vue
index a78b499654..be7214db19 100644
--- a/packages/client/src/components/note-preview.vue
+++ b/packages/client/src/components/note-preview.vue
@@ -27,7 +27,7 @@ const props = defineProps<{
 	display: flex;
 	margin: 0;
 	padding: 0;
-	overflow: clip;
+	overflow: hidden; overflow: clip;
 	font-size: 0.95em;
 
 	&.min-width_350px {
diff --git a/packages/client/src/components/note-simple.vue b/packages/client/src/components/note-simple.vue
index b813b9a2b9..93c34b6bf4 100644
--- a/packages/client/src/components/note-simple.vue
+++ b/packages/client/src/components/note-simple.vue
@@ -36,7 +36,7 @@ const showContent = $ref(false);
 	display: flex;
 	margin: 0;
 	padding: 0;
-	overflow: clip;
+	overflow: hidden; overflow: clip;
 	font-size: 0.95em;
 
 	&.min-width_350px {
diff --git a/packages/client/src/components/note.vue b/packages/client/src/components/note.vue
index c2c92f541d..98c5c9a67a 100644
--- a/packages/client/src/components/note.vue
+++ b/packages/client/src/components/note.vue
@@ -297,7 +297,7 @@ function readPromo() {
 	position: relative;
 	transition: box-shadow 0.1s ease;
 	font-size: 1.05em;
-	overflow: clip;
+	overflow: hidden; overflow: clip;
 	contain: content;
 
 	// これらの指定はパフォーマンス向上には有効だが、ノートの高さは一定でないため、
diff --git a/packages/client/src/components/tag-cloud.vue b/packages/client/src/components/tag-cloud.vue
index 13f528ecf7..5ffa7321e4 100644
--- a/packages/client/src/components/tag-cloud.vue
+++ b/packages/client/src/components/tag-cloud.vue
@@ -73,7 +73,7 @@ defineExpose({
 <style lang="scss" scoped>
 .meijqfqm {
 	position: relative;
-	overflow: clip;
+	overflow: hidden; overflow: clip;
 	display: grid;
 	place-items: center;
 
diff --git a/packages/client/src/components/toast.vue b/packages/client/src/components/toast.vue
index c9fad64eb6..e0230dccd4 100644
--- a/packages/client/src/components/toast.vue
+++ b/packages/client/src/components/toast.vue
@@ -54,7 +54,7 @@ onMounted(() => {
 		width: min-content;
 		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
 		border-radius: 8px;
-		overflow: clip;
+		overflow: hidden; overflow: clip;
 		text-align: center;
 		pointer-events: none;
 
diff --git a/packages/client/src/components/ui/button.vue b/packages/client/src/components/ui/button.vue
index e6b20d9881..d8052b511c 100644
--- a/packages/client/src/components/ui/button.vue
+++ b/packages/client/src/components/ui/button.vue
@@ -148,7 +148,7 @@ export default defineComponent({
 	text-decoration: none;
 	background: var(--buttonBg);
 	border-radius: 5px;
-	overflow: clip;
+	overflow: hidden; overflow: clip;
 	box-sizing: border-box;
 	transition: background 0.1s ease;
 
diff --git a/packages/client/src/components/ui/container.vue b/packages/client/src/components/ui/container.vue
index 7c595d8116..e14242827d 100644
--- a/packages/client/src/components/ui/container.vue
+++ b/packages/client/src/components/ui/container.vue
@@ -10,7 +10,8 @@
 			</button>
 		</div>
 	</header>
-	<transition :name="$store.state.animation ? 'container-toggle' : ''"
+	<transition
+		:name="$store.state.animation ? 'container-toggle' : ''"
 		@enter="enter"
 		@after-enter="afterEnter"
 		@leave="leave"
@@ -34,37 +35,37 @@ export default defineComponent({
 		showHeader: {
 			type: Boolean,
 			required: false,
-			default: true
+			default: true,
 		},
 		thin: {
 			type: Boolean,
 			required: false,
-			default: false
+			default: false,
 		},
 		naked: {
 			type: Boolean,
 			required: false,
-			default: false
+			default: false,
 		},
 		foldable: {
 			type: Boolean,
 			required: false,
-			default: false
+			default: false,
 		},
 		expanded: {
 			type: Boolean,
 			required: false,
-			default: true
+			default: true,
 		},
 		scrollable: {
 			type: Boolean,
 			required: false,
-			default: false
+			default: false,
 		},
 		maxHeight: {
 			type: Number,
 			required: false,
-			default: null
+			default: null,
 		},
 	},
 	data() {
@@ -79,12 +80,12 @@ export default defineComponent({
 			const headerHeight = this.showHeader ? this.$refs.header.offsetHeight : 0;
 			this.$el.style.minHeight = `${headerHeight}px`;
 			if (showBody) {
-				this.$el.style.flexBasis = `auto`;
+				this.$el.style.flexBasis = 'auto';
 			} else {
 				this.$el.style.flexBasis = `${headerHeight}px`;
 			}
 		}, {
-			immediate: true
+			immediate: true,
 		});
 
 		this.$el.style.setProperty('--maxHeight', this.maxHeight + 'px');
@@ -124,7 +125,7 @@ export default defineComponent({
 		afterLeave(el) {
 			el.style.height = null;
 		},
-	}
+	},
 });
 </script>
 
@@ -142,7 +143,7 @@ export default defineComponent({
 
 .ukygtjoj {
 	position: relative;
-	overflow: clip;
+	overflow: hidden; overflow: clip;
 
 	&.naked {
 		background: transparent !important;
diff --git a/packages/client/src/components/ui/modal.vue b/packages/client/src/components/ui/modal.vue
index d6a29ec4b7..385f6cdb2b 100644
--- a/packages/client/src/components/ui/modal.vue
+++ b/packages/client/src/components/ui/modal.vue
@@ -389,7 +389,7 @@ defineExpose({
 		left: 0;
 		width: 100%;
 		height: 100%;
-		overflow: clip;
+		overflow: hidden; overflow: clip;
 
 		> .content {
 			position: fixed;
diff --git a/packages/client/src/pages/about-misskey.vue b/packages/client/src/pages/about-misskey.vue
index fd7b5f936d..a80041b5ce 100644
--- a/packages/client/src/pages/about-misskey.vue
+++ b/packages/client/src/pages/about-misskey.vue
@@ -1,7 +1,7 @@
 <template>
 <MkStickyContainer>
 	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<div style="overflow: clip;">
+	<div style="overflow: hidden; overflow: clip;">
 		<MkSpacer :content-max="600" :margin-min="20">
 			<div class="_formRoot znqjceqz">
 				<div id="debug"></div>
diff --git a/packages/client/src/pages/about.vue b/packages/client/src/pages/about.vue
index e482c4ca6d..6241bbbdda 100644
--- a/packages/client/src/pages/about.vue
+++ b/packages/client/src/pages/about.vue
@@ -138,7 +138,7 @@ definePageMetadata(computed(() => ({
 .fwhjspax {
 	text-align: center;
 	border-radius: 10px;
-	overflow: clip;
+	overflow: hidden; overflow: clip;
 	background-size: cover;
 	background-position: center center;
 
diff --git a/packages/client/src/pages/admin/overview.vue b/packages/client/src/pages/admin/overview.vue
index 316cf04f14..7e085106b9 100644
--- a/packages/client/src/pages/admin/overview.vue
+++ b/packages/client/src/pages/admin/overview.vue
@@ -561,7 +561,7 @@ definePageMetadata({
 				> .body {
 					background: var(--panel);
 					border-radius: var(--radius);
-					overflow: clip;
+					overflow: hidden; overflow: clip;
 				}
 			}
 
@@ -620,7 +620,7 @@ definePageMetadata({
 				> .body {
 					background: var(--panel);
 					border-radius: var(--radius);
-					overflow: clip;
+					overflow: hidden; overflow: clip;
 				}
 			}
 		}
diff --git a/packages/client/src/pages/antenna-timeline.vue b/packages/client/src/pages/antenna-timeline.vue
index 831ced4eac..f843007643 100644
--- a/packages/client/src/pages/antenna-timeline.vue
+++ b/packages/client/src/pages/antenna-timeline.vue
@@ -110,7 +110,7 @@ definePageMetadata(computed(() => antenna ? {
 	> .tl {
 		background: var(--bg);
 		border-radius: var(--radius);
-		overflow: clip;
+		overflow: hidden; overflow: clip;
 	}
 
 	&.min-width_800px {
diff --git a/packages/client/src/pages/settings/profile.vue b/packages/client/src/pages/settings/profile.vue
index 6b60148df5..cbc7327233 100644
--- a/packages/client/src/pages/settings/profile.vue
+++ b/packages/client/src/pages/settings/profile.vue
@@ -192,7 +192,7 @@ definePageMetadata({
 	background-size: cover;
 	background-position: center;
 	border-radius: 10px;
-	overflow: clip;
+	overflow: hidden; overflow: clip;
 
 	> .avatar {
 		display: inline-block;
diff --git a/packages/client/src/pages/settings/theme.vue b/packages/client/src/pages/settings/theme.vue
index 0ed4abc37e..1bdad3e75a 100644
--- a/packages/client/src/pages/settings/theme.vue
+++ b/packages/client/src/pages/settings/theme.vue
@@ -175,7 +175,7 @@ definePageMetadata({
 		> .toggleWrapper {
 			display: inline-block;
 			text-align: left;
-			overflow: clip;
+			overflow: hidden; overflow: clip;
 			padding: 0 100px;
 
 			input {
diff --git a/packages/client/src/pages/timeline.vue b/packages/client/src/pages/timeline.vue
index 40eb85ff43..8554a9aebc 100644
--- a/packages/client/src/pages/timeline.vue
+++ b/packages/client/src/pages/timeline.vue
@@ -177,7 +177,7 @@ definePageMetadata(computed(() => ({
 	> .tl {
 		background: var(--bg);
 		border-radius: var(--radius);
-		overflow: clip;
+		overflow: hidden; overflow: clip;
 	}
 }
 </style>
diff --git a/packages/client/src/pages/user-list-timeline.vue b/packages/client/src/pages/user-list-timeline.vue
index 593db1dea7..3fca6f1416 100644
--- a/packages/client/src/pages/user-list-timeline.vue
+++ b/packages/client/src/pages/user-list-timeline.vue
@@ -103,7 +103,7 @@ definePageMetadata(computed(() => list ? {
 	> .tl {
 		background: var(--bg);
 		border-radius: var(--radius);
-		overflow: clip;
+		overflow: hidden; overflow: clip;
 	}
 
 	&.min-width_800px {
diff --git a/packages/client/src/pages/user/index.photos.vue b/packages/client/src/pages/user/index.photos.vue
index 79dd1726e1..cedb0e05f3 100644
--- a/packages/client/src/pages/user/index.photos.vue
+++ b/packages/client/src/pages/user/index.photos.vue
@@ -90,7 +90,7 @@ export default defineComponent({
 		> .img {
 			height: 128px;
 			border-radius: 6px;
-			overflow: clip;
+			overflow: hidden; overflow: clip;
 		}
 	}
 
diff --git a/packages/client/src/pages/welcome.entrance.a.vue b/packages/client/src/pages/welcome.entrance.a.vue
index 8ff7d9057f..457e38cb23 100644
--- a/packages/client/src/pages/welcome.entrance.a.vue
+++ b/packages/client/src/pages/welcome.entrance.a.vue
@@ -275,7 +275,7 @@ function showMenu(ev) {
 			-webkit-backdrop-filter: var(--blur, blur(15px));
 			backdrop-filter: var(--blur, blur(15px));
 			border-radius: 999px;
-			overflow: clip;
+			overflow: hidden; overflow: clip;
 			width: 800px;
 			padding: 8px 0;
 
diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss
index 94b5dd8cbf..5bd88d5c4a 100644
--- a/packages/client/src/style.scss
+++ b/packages/client/src/style.scss
@@ -260,7 +260,7 @@ hr {
 ._panel {
 	background: var(--panel);
 	border-radius: var(--radius);
-	overflow: clip;
+	overflow: hidden; overflow: clip;
 }
 
 ._block {
diff --git a/packages/client/src/ui/_common_/statusbars.vue b/packages/client/src/ui/_common_/statusbars.vue
index 86d2812f59..11912e141b 100644
--- a/packages/client/src/ui/_common_/statusbars.vue
+++ b/packages/client/src/ui/_common_/statusbars.vue
@@ -52,7 +52,7 @@ const XUserList = defineAsyncComponent(() => import('./statusbar-user-list.vue')
 		width: 100%;
 		line-height: var(--height);
 		height: var(--height);
-		overflow: clip;
+		overflow: hidden; overflow: clip;
 		contain: strict;
 
 		> .name {
diff --git a/packages/client/src/ui/classic.vue b/packages/client/src/ui/classic.vue
index 412b6db34c..310232aec0 100644
--- a/packages/client/src/ui/classic.vue
+++ b/packages/client/src/ui/classic.vue
@@ -241,7 +241,7 @@ onMounted(() => {
 			border-left: solid 1px var(--divider);
 			border-right: solid 1px var(--divider);
 			border-radius: 0;
-			overflow: clip;
+			overflow: hidden; overflow: clip;
 			--margin: 12px;
 		}