perf: use overflow: clip instead of hidden

62 files changed, 217 insertions, 105 deletions

diff --git a/src/client/components/autocomplete.vue b/src/client/components/autocomplete.vue
index ae742610f7..1fe74adc66 100644
--- a/src/client/components/autocomplete.vue
+++ b/src/client/components/autocomplete.vue
@@ -401,7 +401,8 @@ export default defineComponent({
 	z-index: 65535;
 	max-width: 100%;
 	margin-top: calc(1em + 8px);
-	overflow: hidden;
+	overflow: hidden; // overflow: clip; をSafariが対応したら消す
+	overflow: clip;
 	transition: top 0.1s ease, left 0.1s ease;
 
 	> ol {
@@ -418,7 +419,8 @@ export default defineComponent({
 			align-items: center;
 			padding: 4px 12px;
 			white-space: nowrap;
-			overflow: hidden;
+			overflow: hidden; // overflow: clip; をSafariが対応したら消す
+			overflow: clip;
 			font-size: 0.9em;
 			cursor: default;
 
@@ -427,7 +429,8 @@ export default defineComponent({
 			}
 
 			* {
-				overflow: hidden;
+				overflow: hidden; // overflow: clip; をSafariが対応したら消す
+				overflow: clip;
 				text-overflow: ellipsis;
 			}
 
diff --git a/src/client/components/channel-preview.vue b/src/client/components/channel-preview.vue
index e222ad7ae7..3e24774f52 100644
--- a/src/client/components/channel-preview.vue
+++ b/src/client/components/channel-preview.vue
@@ -66,7 +66,8 @@ export default defineComponent({
 <style lang="scss" scoped>
 .eftoefju {
 	display: block;
-	overflow: hidden;
+	overflow: hidden; // overflow: clip; をSafariが対応したら消す
+	overflow: clip;
 	width: 100%;
 
 	&:hover {
diff --git a/src/client/components/drive.file.vue b/src/client/components/drive.file.vue
index d2b8b95f73..80283f997b 100644
--- a/src/client/components/drive.file.vue
+++ b/src/client/components/drive.file.vue
@@ -342,7 +342,8 @@ export default defineComponent({
 		text-align: center;
 		word-break: break-all;
 		color: var(--fg);
-		overflow: hidden;
+		overflow: hidden; // overflow: clip; をSafariが対応したら消す
+		overflow: clip;
 
 		> .ext {
 			opacity: 0.5;
diff --git a/src/client/components/form/input.vue b/src/client/components/form/input.vue
index f0aa6b0534..f16d8be026 100644
--- a/src/client/components/form/input.vue
+++ b/src/client/components/form/input.vue
@@ -261,7 +261,8 @@ export default defineComponent({
 				display: inline-block;
 				min-width: 16px;
 				max-width: 150px;
-				overflow: hidden;
+				overflow: hidden; // overflow: clip; をSafariが対応したら消す
+				overflow: clip;
 				white-space: nowrap;
 				text-overflow: ellipsis;
 			}
diff --git a/src/client/components/form/link.vue b/src/client/components/form/link.vue
index 7093f50397..6f0ae0e5f7 100644
--- a/src/client/components/form/link.vue
+++ b/src/client/components/form/link.vue
@@ -83,7 +83,8 @@ export default defineComponent({
 		> .text {
 			white-space: nowrap;
 			text-overflow: ellipsis;
-			overflow: hidden;
+			overflow: hidden; // overflow: clip; をSafariが対応したら消す
+			overflow: clip;
 			padding-right: 12px;
 		}
 
diff --git a/src/client/components/global/avatar.vue b/src/client/components/global/avatar.vue
index d2f25fa41e..8930bb4a0c 100644
--- a/src/client/components/global/avatar.vue
+++ b/src/client/components/global/avatar.vue
@@ -101,7 +101,8 @@ export default defineComponent({
 		top: 0;
 		border-radius: 100%;
 		z-index: 1;
-		overflow: hidden;
+		overflow: hidden; // overflow: clip; をSafariが対応したら消す
+		overflow: clip;
 		object-fit: cover;
 		width: 100%;
 		height: 100%;
diff --git a/src/client/components/global/misskey-flavored-markdown.vue b/src/client/components/global/misskey-flavored-markdown.vue
index a3f443d5d8..0b34ccbfb4 100644
--- a/src/client/components/global/misskey-flavored-markdown.vue
+++ b/src/client/components/global/misskey-flavored-markdown.vue
@@ -126,7 +126,8 @@ export default defineComponent({
 	&.nowrap {
 		white-space: pre;
 		word-wrap: normal; // https://codeday.me/jp/qa/20190424/690106.html
-		overflow: hidden;
+		overflow: hidden; // overflow: clip; をSafariが対応したら消す
+		overflow: clip;
 		text-overflow: ellipsis;
 	}
 
diff --git a/src/client/components/instance-stats.vue b/src/client/components/instance-stats.vue
index e9b496180a..80070996fc 100644
--- a/src/client/components/instance-stats.vue
+++ b/src/client/components/instance-stats.vue
@@ -692,7 +692,8 @@ export default defineComponent({
 
 						> dd {
 							text-overflow: ellipsis;
-							overflow: hidden;
+							overflow: hidden; // overflow: clip; をSafariが対応したら消す
+							overflow: clip;
 							white-space: nowrap;
 						}
 
diff --git a/src/client/components/instance-ticker.vue b/src/client/components/instance-ticker.vue
index 1ce5a1c2c1..fa46f8edc4 100644
--- a/src/client/components/instance-ticker.vue
+++ b/src/client/components/instance-ticker.vue
@@ -44,7 +44,8 @@ export default defineComponent({
 
 	height: $height;
 	border-radius: 4px 0 0 4px;
-	overflow: hidden;
+	overflow: hidden; // overflow: clip; をSafariが対応したら消す
+	overflow: clip;
 	color: #fff;
 
 	> .icon {
diff --git a/src/client/components/media-banner.vue b/src/client/components/media-banner.vue
index a2e1776d09..4fc6701d36 100644
--- a/src/client/components/media-banner.vue
+++ b/src/client/components/media-banner.vue
@@ -62,7 +62,8 @@ export default defineComponent({
 	width: 100%;
 	border-radius: 4px;
 	margin-top: 4px;
-	overflow: hidden;
+	overflow: hidden; // overflow: clip; をSafariが対応したら消す
+	overflow: clip;
 
 	> .download,
 	> .sensitive {
@@ -77,7 +78,8 @@ export default defineComponent({
 		}
 
 		> b {
-			overflow: hidden;
+			overflow: hidden; // overflow: clip; をSafariが対応したら消す
+			overflow: clip;
 			text-overflow: ellipsis;
 		}
 
diff --git a/src/client/components/media-image.vue b/src/client/components/media-image.vue
index 9f3898ec56..5f55d88388 100644
--- a/src/client/components/media-image.vue
+++ b/src/client/components/media-image.vue
@@ -143,7 +143,8 @@ export default defineComponent({
 	> a {
 		display: block;
 		cursor: zoom-in;
-		overflow: hidden;
+		overflow: hidden; // overflow: clip; をSafariが対応したら消す
+		overflow: clip;
 		width: 100%;
 		height: 100%;
 		background-position: center;
diff --git a/src/client/components/media-list.vue b/src/client/components/media-list.vue
index 36fbb4bd06..61482266ab 100644
--- a/src/client/components/media-list.vue
+++ b/src/client/components/media-list.vue
@@ -105,7 +105,8 @@ export default defineComponent({
 			grid-gap: 4px;
 
 			> * {
-				overflow: hidden;
+				overflow: hidden; // overflow: clip; をSafariが対応したら消す
+				overflow: clip;
 				border-radius: 6px;
 			}
 
diff --git a/src/client/components/media-video.vue b/src/client/components/media-video.vue
index 3788947206..dbde40f666 100644
--- a/src/client/components/media-video.vue
+++ b/src/client/components/media-video.vue
@@ -78,7 +78,8 @@ export default defineComponent({
 		align-items: center;
 
 		font-size: 3.5em;
-		overflow: hidden;
+		overflow: hidden; // overflow: clip; をSafariが対応したら消す
+		overflow: clip;
 		background-position: center;
 		background-size: cover;
 		width: 100%;
diff --git a/src/client/components/note-detailed.vue b/src/client/components/note-detailed.vue
index 434dd56ba3..83157f7d59 100644
--- a/src/client/components/note-detailed.vue
+++ b/src/client/components/note-detailed.vue
@@ -892,7 +892,8 @@ export default defineComponent({
 .note {
 	position: relative;
 	transition: box-shadow 0.1s ease;
-	overflow: hidden;
+	overflow: hidden; // overflow: clip; をSafariが対応したら消す
+	overflow: clip;
 	contain: content;
 
 	&:focus-visible {
@@ -952,7 +953,8 @@ export default defineComponent({
 		}
 
 		> span {
-			overflow: hidden;
+			overflow: hidden; // overflow: clip; をSafariが対応したら消す
+			overflow: clip;
 			flex-shrink: 1;
 			text-overflow: ellipsis;
 			white-space: nowrap;
diff --git a/src/client/components/note-header.vue b/src/client/components/note-header.vue
index 1f7a07bac3..aed4225067 100644
--- a/src/client/components/note-header.vue
+++ b/src/client/components/note-header.vue
@@ -61,7 +61,8 @@ export default defineComponent({
 		display: block;
 		margin: 0 .5em 0 0;
 		padding: 0;
-		overflow: hidden;
+		overflow: hidden; // overflow: clip; をSafariが対応したら消す
+		overflow: clip;
 		font-size: 1em;
 		font-weight: bold;
 		text-decoration: none;
@@ -90,7 +91,8 @@ export default defineComponent({
 
 	> .username {
 		margin: 0 .5em 0 0;
-		overflow: hidden;
+		overflow: hidden; // overflow: clip; をSafariが対応したら消す
+		overflow: clip;
 		text-overflow: ellipsis;
 	}
 
diff --git a/src/client/components/note-preview.vue b/src/client/components/note-preview.vue
index 4ea97d17ee..4715c299b5 100644
--- a/src/client/components/note-preview.vue
+++ b/src/client/components/note-preview.vue
@@ -50,7 +50,8 @@ export default defineComponent({
 	display: flex;
 	margin: 0;
 	padding: 0;
-	overflow: hidden;
+	overflow: hidden; // overflow: clip; をSafariが対応したら消す
+	overflow: clip;
 	font-size: 0.95em;
 
 	> .avatar {
diff --git a/src/client/components/note.vue b/src/client/components/note.vue
index 24c374869d..377e5991b2 100644
--- a/src/client/components/note.vue
+++ b/src/client/components/note.vue
@@ -867,7 +867,8 @@ export default defineComponent({
 .tkcbzcuz {
 	position: relative;
 	transition: box-shadow 0.1s ease;
-	overflow: hidden;
+	overflow: hidden; // overflow: clip; をSafariが対応したら消す
+	overflow: clip;
 	contain: content;
 
 	// これらの指定はパフォーマンス向上には有効だが、ノートの高さは一定でないため、
@@ -954,7 +955,8 @@ export default defineComponent({
 		}
 
 		> span {
-			overflow: hidden;
+			overflow: hidden; // overflow: clip; をSafariが対応したら消す
+			overflow: clip;
 			flex-shrink: 1;
 			text-overflow: ellipsis;
 			white-space: nowrap;
@@ -1026,7 +1028,8 @@ export default defineComponent({
 					&.collapsed {
 						position: relative;
 						max-height: 9em;
-						overflow: hidden;
+						overflow: hidden; // overflow: clip; をSafariが対応したら消す
+						overflow: clip;
 
 						> .fade {
 							display: block;
diff --git a/src/client/components/notification.vue b/src/client/components/notification.vue
index 2fe8500891..a0cfe4f213 100644
--- a/src/client/components/notification.vue
+++ b/src/client/components/notification.vue
@@ -257,7 +257,8 @@ export default defineComponent({
 				text-overflow: ellipsis;
 				white-space: nowrap;
 				min-width: 0;
-				overflow: hidden;
+				overflow: hidden; // overflow: clip; をSafariが対応したら消す
+				overflow: clip;
 			}
 
 			> .time {
@@ -268,7 +269,8 @@ export default defineComponent({
 
 		> .text {
 			white-space: nowrap;
-			overflow: hidden;
+			overflow: hidden; // overflow: clip; をSafariが対応したら消す
+			overflow: clip;
 			text-overflow: ellipsis;
 
 			> [data-icon] {
diff --git a/src/client/components/poll.vue b/src/client/components/poll.vue
index 7f13e135aa..01bbefe36d 100644
--- a/src/client/components/poll.vue
+++ b/src/client/components/poll.vue
@@ -112,7 +112,8 @@ export default defineComponent({
 			padding: 4px 8px;
 			border: solid 1px var(--divider);
 			border-radius: 4px;
-			overflow: hidden;
+			overflow: hidden; // overflow: clip; をSafariが対応したら消す
+			overflow: clip;
 			cursor: pointer;
 
 			&:hover {
diff --git a/src/client/components/post-form-attaches.vue b/src/client/components/post-form-attaches.vue
index 230c944de1..3b5cb75c19 100644
--- a/src/client/components/post-form-attaches.vue
+++ b/src/client/components/post-form-attaches.vue
@@ -127,7 +127,8 @@ export default defineComponent({
 			height: 64px;
 			margin-right: 4px;
 			border-radius: 4px;
-			overflow: hidden;
+			overflow: hidden; // overflow: clip; をSafariが対応したら消す
+			overflow: clip;
 			cursor: move;
 
 			&:hover > .remove {
diff --git a/src/client/components/sidebar.vue b/src/client/components/sidebar.vue
index f7c50a2ba5..6460043244 100644
--- a/src/client/components/sidebar.vue
+++ b/src/client/components/sidebar.vue
@@ -390,7 +390,8 @@ export default defineComponent({
 				font-size: $ui-font-size;
 				line-height: 3rem;
 				text-overflow: ellipsis;
-				overflow: hidden;
+				overflow: hidden; // overflow: clip; をSafariが対応したら消す
+				overflow: clip;
 				white-space: nowrap;
 				width: 100%;
 				text-align: left;
diff --git a/src/client/components/toast.vue b/src/client/components/toast.vue
index fb0de68092..49c14789b7 100644
--- a/src/client/components/toast.vue
+++ b/src/client/components/toast.vue
@@ -67,7 +67,8 @@ export default defineComponent({
 		height: 100%;
 		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
 		border-radius: 8px;
-		overflow: hidden;
+		overflow: hidden; // overflow: clip; をSafariが対応したら消す
+		overflow: clip;
 	}
 }
 </style>
diff --git a/src/client/components/ui/button.vue b/src/client/components/ui/button.vue
index 3901e8ae44..e98c5efcc0 100644
--- a/src/client/components/ui/button.vue
+++ b/src/client/components/ui/button.vue
@@ -124,7 +124,8 @@ export default defineComponent({
 	text-decoration: none;
 	background: var(--buttonBg);
 	border-radius: 999px;
-	overflow: hidden;
+	overflow: hidden; // overflow: clip; をSafariが対応したら消す
+	overflow: clip;
 
 	&:not(:disabled):hover {
 		background: var(--buttonHoverBg);
@@ -212,7 +213,8 @@ export default defineComponent({
 		width: 100%;
 		height: 100%;
 		border-radius: 6px;
-		overflow: hidden;
+		overflow: hidden; // overflow: clip; をSafariが対応したら消す
+		overflow: clip;
 
 		::v-deep(div) {
 			position: absolute;
diff --git a/src/client/components/ui/container.vue b/src/client/components/ui/container.vue
index c3353cca89..b9360e92fa 100644
--- a/src/client/components/ui/container.vue
+++ b/src/client/components/ui/container.vue
@@ -116,7 +116,8 @@ export default defineComponent({
 
 .ukygtjoj {
 	position: relative;
-	overflow: hidden;
+	overflow: hidden; // overflow: clip; をSafariが対応したら消す
+	overflow: clip;
 
 	&.naked {
 		background: transparent !important;
diff --git a/src/client/components/ui/input.vue b/src/client/components/ui/input.vue
index 1c5222f8f2..cea1ec1b7f 100644
--- a/src/client/components/ui/input.vue
+++ b/src/client/components/ui/input.vue
@@ -298,7 +298,8 @@ export default defineComponent({
 			transform: scale(.75);
 			white-space: nowrap;
 			width: 133%;
-			overflow: hidden;
+			overflow: hidden; // overflow: clip; をSafariが対応したら消す
+			overflow: clip;
 			text-overflow: ellipsis;
 
 			> .warning {
@@ -354,7 +355,8 @@ export default defineComponent({
 				display: inline-block;
 				min-width: 16px;
 				max-width: 150px;
-				overflow: hidden;
+				overflow: hidden; // overflow: clip; をSafariが対応したら消す
+				overflow: clip;
 				white-space: nowrap;
 				text-overflow: ellipsis;
 			}
diff --git a/src/client/components/ui/menu.vue b/src/client/components/ui/menu.vue
index c2033402e3..c9accf7c31 100644
--- a/src/client/components/ui/menu.vue
+++ b/src/client/components/ui/menu.vue
@@ -155,7 +155,8 @@ export default defineComponent({
 		font-size: 0.9em;
 		line-height: 20px;
 		text-align: center;
-		overflow: hidden;
+		overflow: hidden; // overflow: clip; をSafariが対応したら消す
+		overflow: clip;
 		text-overflow: ellipsis;
 
 		&.danger {
diff --git a/src/client/components/ui/modal-window.vue b/src/client/components/ui/modal-window.vue
index 2cdf961379..3965b537e5 100644
--- a/src/client/components/ui/modal-window.vue
+++ b/src/client/components/ui/modal-window.vue
@@ -89,7 +89,8 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .ebkgoccj {
-	overflow: hidden;
+	overflow: hidden; // overflow: clip; をSafariが対応したら消す
+	overflow: clip;
 	display: flex;
 	flex-direction: column;
 	contain: content;
@@ -123,7 +124,8 @@ export default defineComponent({
 			padding-left: 32px;
 			font-weight: bold;
 			white-space: nowrap;
-			overflow: hidden;
+			overflow: hidden; // overflow: clip; をSafariが対応したら消す
+			overflow: clip;
 			text-overflow: ellipsis;
 			pointer-events: none;
 
diff --git a/src/client/components/ui/range.vue b/src/client/components/ui/range.vue
index 4cfe66a8fc..cbdf07d6b6 100644
--- a/src/client/components/ui/range.vue
+++ b/src/client/components/ui/range.vue
@@ -89,7 +89,8 @@ export default defineComponent({
 		pointer-events: none;
 		font-size: 16px;
 		color: var(--inputLabel);
-		overflow: hidden;
+		overflow: hidden; // overflow: clip; をSafariが対応したら消す
+		overflow: clip;
 	}
 
 	> input {
diff --git a/src/client/components/ui/window.vue b/src/client/components/ui/window.vue
index 37bb645cfd..d8852b9ffd 100644
--- a/src/client/components/ui/window.vue
+++ b/src/client/components/ui/window.vue
@@ -388,7 +388,8 @@ export default defineComponent({
 	z-index: 5000;
 
 	> .body {
-		overflow: hidden;
+		overflow: hidden; // overflow: clip; をSafariが対応したら消す
+		overflow: clip;
 		display: flex;
 		flex-direction: column;
 		contain: content;
@@ -418,7 +419,8 @@ export default defineComponent({
 				position: relative;
 				line-height: $height;
 				white-space: nowrap;
-				overflow: hidden;
+				overflow: hidden; // overflow: clip; をSafariが対応したら消す
+				overflow: clip;
 				text-overflow: ellipsis;
 				text-align: center;
 				cursor: move;
diff --git a/src/client/components/url-preview.vue b/src/client/components/url-preview.vue
index 7a59068710..a7068d1619 100644
--- a/src/client/components/url-preview.vue
+++ b/src/client/components/url-preview.vue
@@ -244,7 +244,8 @@ export default defineComponent({
 		font-size: 14px;
 		box-shadow: 0 0 0 1px var(--divider);
 		border-radius: 8px;
-		overflow: hidden;
+		overflow: hidden; // overflow: clip; をSafariが対応したら消す
+		overflow: clip;
 
 		&:hover {
 			text-decoration: none;
@@ -326,7 +327,8 @@ export default defineComponent({
 		&.compact {
 			> article {
 				> header h1, p, footer {
-					overflow: hidden;
+					overflow: hidden; // overflow: clip; をSafariが対応したら消す
+					overflow: clip;
 					white-space: nowrap;
 					text-overflow: ellipsis;
 				}
diff --git a/src/client/components/user-info.vue b/src/client/components/user-info.vue
index 711e367411..b744f21929 100644
--- a/src/client/components/user-info.vue
+++ b/src/client/components/user-info.vue
@@ -110,7 +110,8 @@ export default defineComponent({
 			display: -webkit-box;
 			-webkit-line-clamp: 3;
 			-webkit-box-orient: vertical;  
-			overflow: hidden;
+			overflow: hidden; // overflow: clip; をSafariが対応したら消す
+			overflow: clip;
 		}
 	}
 
diff --git a/src/client/components/user-preview.vue b/src/client/components/user-preview.vue
index c4588e478a..86e53228ce 100644
--- a/src/client/components/user-preview.vue
+++ b/src/client/components/user-preview.vue
@@ -111,7 +111,8 @@ export default defineComponent({
 	position: absolute;
 	z-index: 11000;
 	width: 300px;
-	overflow: hidden;
+	overflow: hidden; // overflow: clip; をSafariが対応したら消す
+	overflow: clip;
 	transform-origin: center top;
 
 	> .info {
diff --git a/src/client/components/users-dialog.vue b/src/client/components/users-dialog.vue
index 014748adc6..af47391c5d 100644
--- a/src/client/components/users-dialog.vue
+++ b/src/client/components/users-dialog.vue
@@ -66,7 +66,8 @@ export default defineComponent({
 	height: 350px;
 	background: var(--panel);
 	border-radius: var(--radius);
-	overflow: hidden;
+	overflow: hidden; // overflow: clip; をSafariが対応したら消す
+	overflow: clip;
 	display: flex;
 	flex-direction: column;
 
@@ -127,7 +128,8 @@ export default defineComponent({
 
 			> .body {
 				padding: 0 8px;
-				overflow: hidden;
+				overflow: hidden; // overflow: clip; をSafariが対応したら消す
+				overflow: clip;
 
 				> .name {
 					display: block;
diff --git a/src/client/components/visibility-picker.vue b/src/client/components/visibility-picker.vue
index e518f48d0d..66dd9c2aed 100644
--- a/src/client/components/visibility-picker.vue
+++ b/src/client/components/visibility-picker.vue
@@ -141,7 +141,8 @@ export default defineComponent({
 		> *:nth-child(2) {
 			flex: 1 1 auto;
 			white-space: nowrap;
-			overflow: hidden;
+			overflow: hidden; // overflow: clip; をSafariが対応したら消す
+			overflow: clip;
 			text-overflow: ellipsis;
 
 			> span:first-child {
diff --git a/src/client/pages/about-misskey.vue b/src/client/pages/about-misskey.vue
index 7022a924b0..fa47a80492 100644
--- a/src/client/pages/about-misskey.vue
+++ b/src/client/pages/about-misskey.vue
@@ -1,5 +1,5 @@
 <template>
-<div style="overflow: hidden;">
+<div style="overflow: hidden; overflow: clip;">
 	<FormBase class="znqjceqz">
 		<div id="debug"></div>
 		<section class="_formItem about">
diff --git a/src/client/pages/follow-requests.vue b/src/client/pages/follow-requests.vue
index 04d739088f..18f39642e4 100644
--- a/src/client/pages/follow-requests.vue
+++ b/src/client/pages/follow-requests.vue
@@ -104,7 +104,8 @@ export default defineComponent({
 					display: block;
 					white-space: nowrap;
 					text-overflow: ellipsis;
-					overflow: hidden;
+					overflow: hidden; // overflow: clip; をSafariが対応したら消す
+					overflow: clip;
 					margin: 0;
 				}
 
@@ -124,7 +125,8 @@ export default defineComponent({
 				width: 55%;
 				line-height: 42px;
 				white-space: nowrap;
-				overflow: hidden;
+				overflow: hidden; // overflow: clip; をSafariが対応したら消す
+				overflow: clip;
 				text-overflow: ellipsis;
 				opacity: 0.7;
 				font-size: 14px;
diff --git a/src/client/pages/instance/emojis.vue b/src/client/pages/instance/emojis.vue
index 6a51813bb2..71b6c11b2d 100644
--- a/src/client/pages/instance/emojis.vue
+++ b/src/client/pages/instance/emojis.vue
@@ -178,17 +178,20 @@ export default defineComponent({
 					> .body {
 						padding: 0 0 0 8px;
 						white-space: nowrap;
-						overflow: hidden;
+						overflow: hidden; // overflow: clip; をSafariが対応したら消す
+						overflow: clip;
 
 						> .name {
 							text-overflow: ellipsis;
-							overflow: hidden;
+							overflow: hidden; // overflow: clip; をSafariが対応したら消す
+							overflow: clip;
 						}
 
 						> .info {
 							opacity: 0.5;
 							text-overflow: ellipsis;
-							overflow: hidden;
+							overflow: hidden; // overflow: clip; をSafariが対応したら消す
+							overflow: clip;
 						}
 					}
 				}
@@ -219,17 +222,20 @@ export default defineComponent({
 					> .body {
 						padding: 0 0 0 8px;
 						white-space: nowrap;
-						overflow: hidden;
+						overflow: hidden; // overflow: clip; をSafariが対応したら消す
+						overflow: clip;
 
 						> .name {
 							text-overflow: ellipsis;
-							overflow: hidden;
+							overflow: hidden; // overflow: clip; をSafariが対応したら消す
+							overflow: clip;
 						}
 
 						> .info {
 							opacity: 0.5;
 							text-overflow: ellipsis;
-							overflow: hidden;
+							overflow: hidden; // overflow: clip; をSafariが対応したら消す
+							overflow: clip;
 						}
 					}
 				}
diff --git a/src/client/pages/messaging/index.vue b/src/client/pages/messaging/index.vue
index aefc31f3bc..8e7fe5134a 100644
--- a/src/client/pages/messaging/index.vue
+++ b/src/client/pages/messaging/index.vue
@@ -226,12 +226,14 @@ export default defineComponent({
 					align-items: center;
 					margin-bottom: 2px;
 					white-space: nowrap;
-					overflow: hidden;
+					overflow: hidden; // overflow: clip; をSafariが対応したら消す
+					overflow: clip;
 
 					> .name {
 						margin: 0;
 						padding: 0;
-						overflow: hidden;
+						overflow: hidden; // overflow: clip; をSafariが対応したら消す
+						overflow: clip;
 						text-overflow: ellipsis;
 						font-size: 1em;
 						font-weight: bold;
@@ -262,7 +264,8 @@ export default defineComponent({
 						display: block;
 						margin: 0 0 0 0;
 						padding: 0;
-						overflow: hidden;
+						overflow: hidden; // overflow: clip; をSafariが対応したら消す
+						overflow: clip;
 						overflow-wrap: break-word;
 						font-size: 1.1em;
 						color: var(--faceText);
diff --git a/src/client/pages/messaging/messaging-room.message.vue b/src/client/pages/messaging/messaging-room.message.vue
index d379c0c3c0..3d994c2666 100644
--- a/src/client/pages/messaging/messaging-room.message.vue
+++ b/src/client/pages/messaging/messaging-room.message.vue
@@ -154,7 +154,8 @@ export default defineComponent({
 					display: block;
 					margin: 0;
 					padding: 0;
-					overflow: hidden;
+					overflow: hidden; // overflow: clip; をSafariが対応したら消す
+					overflow: clip;
 					overflow-wrap: break-word;
 					font-size: 1em;
 					color: rgba(#000, 0.5);
@@ -164,7 +165,8 @@ export default defineComponent({
 					display: block;
 					margin: 0;
 					padding: 12px 18px;
-					overflow: hidden;
+					overflow: hidden; // overflow: clip; をSafariが対応したら消す
+					overflow: clip;
 					overflow-wrap: break-word;
 					word-break: break-word;
 					font-size: 1em;
@@ -182,7 +184,8 @@ export default defineComponent({
 						display: block;
 						max-width: 100%;
 						border-radius: 16px;
-						overflow: hidden;
+						overflow: hidden; // overflow: clip; をSafariが対応したら消す
+						overflow: clip;
 						text-decoration: none;
 
 						&:hover {
diff --git a/src/client/pages/page-editor/page-editor.container.vue b/src/client/pages/page-editor/page-editor.container.vue
index 46e2dca157..5e89b8c2bf 100644
--- a/src/client/pages/page-editor/page-editor.container.vue
+++ b/src/client/pages/page-editor/page-editor.container.vue
@@ -74,7 +74,8 @@ export default defineComponent({
 <style lang="scss" scoped>
 .cpjygsrt {
 	position: relative;
-	overflow: hidden;
+	overflow: hidden; // overflow: clip; をSafariが対応したら消す
+	overflow: clip;
 	background: var(--panel);
 	border: solid 2px var(--X12);
 	border-radius: 6px;
diff --git a/src/client/pages/reversi/game.board.vue b/src/client/pages/reversi/game.board.vue
index 8ce232af07..a3c7900d20 100644
--- a/src/client/pages/reversi/game.board.vue
+++ b/src/client/pages/reversi/game.board.vue
@@ -434,7 +434,8 @@ export default defineComponent({
 				> div {
 					background: transparent;
 					border-radius: 6px;
-					overflow: hidden;
+					overflow: hidden; // overflow: clip; をSafariが対応したら消す
+					overflow: clip;
 
 					* {
 						pointer-events: none;
diff --git a/src/client/pages/reversi/game.setting.vue b/src/client/pages/reversi/game.setting.vue
index 404e560a06..3ed4d2c67b 100644
--- a/src/client/pages/reversi/game.setting.vue
+++ b/src/client/pages/reversi/game.setting.vue
@@ -333,7 +333,8 @@ export default defineComponent({
 							background: transparent;
 							border: solid 2px var(--divider);
 							border-radius: 6px;
-							overflow: hidden;
+							overflow: hidden; // overflow: clip; をSafariが対応したら消す
+							overflow: clip;
 							cursor: pointer;
 
 							* {
diff --git a/src/client/pages/settings/drive.vue b/src/client/pages/settings/drive.vue
index 8ca8bc9eec..869af77f37 100644
--- a/src/client/pages/settings/drive.vue
+++ b/src/client/pages/settings/drive.vue
@@ -230,7 +230,8 @@ export default defineComponent({
 			$size: 12px;
 			background: rgba(0, 0, 0, 0.1);
 			border-radius: ($size / 2);
-			overflow: hidden;
+			overflow: hidden; // overflow: clip; をSafariが対応したら消す
+			overflow: clip;
 
 			> div {
 				height: $size;
diff --git a/src/client/pages/settings/security.vue b/src/client/pages/settings/security.vue
index cdb5705c0b..913e0e64bf 100644
--- a/src/client/pages/settings/security.vue
+++ b/src/client/pages/settings/security.vue
@@ -144,7 +144,8 @@ export default defineComponent({
 			flex: 1;
 			min-width: 0;
 			white-space: nowrap;
-			overflow: hidden;
+			overflow: hidden; // overflow: clip; をSafariが対応したら消す
+			overflow: clip;
 			text-overflow: ellipsis;
 			margin-right: 12px;
 		}
diff --git a/src/client/pages/settings/theme.vue b/src/client/pages/settings/theme.vue
index ac57c51df4..e230a2276b 100644
--- a/src/client/pages/settings/theme.vue
+++ b/src/client/pages/settings/theme.vue
@@ -184,7 +184,8 @@ export default defineComponent({
 			position: absolute;
 			top: 50%;
 			left: 50%;
-			overflow: hidden;
+			overflow: hidden; // overflow: clip; をSafariが対応したら消す
+			overflow: clip;
 			padding: 0 100px;
 			transform: translate3d(-50%, -50%, 0);
 
diff --git a/src/client/pages/user/index.vue b/src/client/pages/user/index.vue
index 5229db9ee3..959170f526 100644
--- a/src/client/pages/user/index.vue
+++ b/src/client/pages/user/index.vue
@@ -369,7 +369,8 @@ export default defineComponent({
 		position: relative;
 		height: 450px;
 		border-radius: 16px;
-		overflow: hidden;
+		overflow: hidden; // overflow: clip; をSafariが対応したら消す
+		overflow: clip;
 		background-size: cover;
 		background-position: center;
 
@@ -472,7 +473,8 @@ export default defineComponent({
 
 					> .name {
 						width: 30%;
-						overflow: hidden;
+						overflow: hidden; // overflow: clip; をSafariが対応したら消す
+						overflow: clip;
 						white-space: nowrap;
 						text-overflow: ellipsis;
 						font-weight: bold;
@@ -480,7 +482,8 @@ export default defineComponent({
 
 					> .value {
 						width: 70%;
-						overflow: hidden;
+						overflow: hidden; // overflow: clip; をSafariが対応したら消す
+						overflow: clip;
 						white-space: nowrap;
 						text-overflow: ellipsis;
 						margin: 0;
@@ -542,7 +545,8 @@ export default defineComponent({
 .ftskorzw.narrow {
 	max-width: 100vw;
 	box-sizing: border-box;
-	overflow: hidden;
+	overflow: hidden; // overflow: clip; をSafariが対応したら消す
+	overflow: clip;
 
 	> .punished {
 		font-size: 0.8em;
@@ -553,12 +557,14 @@ export default defineComponent({
 
 		> .main {
 			position: relative;
-			overflow: hidden;
+			overflow: hidden; // overflow: clip; をSafariが対応したら消す
+			overflow: clip;
 
 			> .banner-container {
 				position: relative;
 				height: 250px;
-				overflow: hidden;
+				overflow: hidden; // overflow: clip; をSafariが対応したら消す
+				overflow: clip;
 				background-size: cover;
 				background-position: center;
 
@@ -703,7 +709,8 @@ export default defineComponent({
 
 					> .name {
 						width: 30%;
-						overflow: hidden;
+						overflow: hidden; // overflow: clip; をSafariが対応したら消す
+						overflow: clip;
 						white-space: nowrap;
 						text-overflow: ellipsis;
 						font-weight: bold;
@@ -712,7 +719,8 @@ export default defineComponent({
 
 					> .value {
 						width: 70%;
-						overflow: hidden;
+						overflow: hidden; // overflow: clip; をSafariが対応したら消す
+						overflow: clip;
 						white-space: nowrap;
 						text-overflow: ellipsis;
 						margin: 0;
diff --git a/src/client/pages/welcome.entrance.a.vue b/src/client/pages/welcome.entrance.a.vue
index 4d356774eb..46a52f4189 100644
--- a/src/client/pages/welcome.entrance.a.vue
+++ b/src/client/pages/welcome.entrance.a.vue
@@ -167,7 +167,8 @@ export default defineComponent({
 			margin: auto;
 			width: 500px;
 			height: calc(100% - 128px);
-			overflow: hidden;
+			overflow: hidden; // overflow: clip; をSafariが対応したら消す
+			overflow: clip;
 			-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 128px, rgba(0,0,0,1) calc(100% - 128px), rgba(0,0,0,0) 100%);
 			mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 128px, rgba(0,0,0,1) calc(100% - 128px), rgba(0,0,0,0) 100%);
 
diff --git a/src/client/pages/welcome.entrance.b.vue b/src/client/pages/welcome.entrance.b.vue
index 8a6f60e726..0dc91359d0 100644
--- a/src/client/pages/welcome.entrance.b.vue
+++ b/src/client/pages/welcome.entrance.b.vue
@@ -151,7 +151,8 @@ export default defineComponent({
 			margin: auto;
 			width: 500px;
 			height: calc(100% - 128px);
-			overflow: hidden;
+			overflow: hidden; // overflow: clip; をSafariが対応したら消す
+			overflow: clip;
 			-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 128px, rgba(0,0,0,1) calc(100% - 128px), rgba(0,0,0,0) 100%);
 			mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 128px, rgba(0,0,0,1) calc(100% - 128px), rgba(0,0,0,0) 100%);
 		}
diff --git a/src/client/pages/welcome.setup.vue b/src/client/pages/welcome.setup.vue
index bc994099ac..9c1315cc40 100644
--- a/src/client/pages/welcome.setup.vue
+++ b/src/client/pages/welcome.setup.vue
@@ -71,7 +71,8 @@ export default defineComponent({
 .mk-setup {
 	border-radius: var(--radius);
 	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
-	overflow: hidden;
+	overflow: hidden; // overflow: clip; をSafariが対応したら消す
+	overflow: clip;
 
 	> h1 {
 		margin: 0;
diff --git a/src/client/style.scss b/src/client/style.scss
index de548cc9c9..3ebb5fabd1 100644
--- a/src/client/style.scss
+++ b/src/client/style.scss
@@ -241,7 +241,8 @@ hr {
 	border-radius: var(--radius);
 	//border: var(--panelBorder);
 	box-shadow: var(--panelShadow);
-	overflow: hidden;
+	overflow: hidden; // overflow: clip; をSafariが対応したら消す
+	overflow: clip;
 }
 
 ._card {
@@ -457,6 +458,14 @@ hr {
 	opacity: 0.7;
 }
 
+// TODO: refactor: 全てのvueファイル中の text-overflow: ellipsis; している箇所をこのクラスを使って置き換える
+._oneline {
+	white-space: nowrap;
+	overflow: hidden; // overflow: clip; をSafariが対応したら消す
+	overflow: clip;
+	text-overflow: ellipsis;
+}
+
 ._monospace {
 	font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
 }
diff --git a/src/client/ui/_common_/header.vue b/src/client/ui/_common_/header.vue
index f150653a84..3f4796d7a1 100644
--- a/src/client/ui/_common_/header.vue
+++ b/src/client/ui/_common_/header.vue
@@ -132,7 +132,8 @@ export default defineComponent({
 			display: inline-block;
 			vertical-align: bottom;
 			white-space: nowrap;
-			overflow: hidden;
+			overflow: hidden; // overflow: clip; をSafariが対応したら消す
+			overflow: clip;
 			text-overflow: ellipsis;
 			padding: 0 16px;
 			position: relative;
diff --git a/src/client/ui/_common_/upload.vue b/src/client/ui/_common_/upload.vue
index c1986737d7..6262d0b725 100644
--- a/src/client/ui/_common_/upload.vue
+++ b/src/client/ui/_common_/upload.vue
@@ -89,7 +89,8 @@ export default defineComponent({
   font-size: 0.8em;
   white-space: nowrap;
   text-overflow: ellipsis;
-  overflow: hidden;
+  overflow: hidden; // overflow: clip; をSafariが対応したら消す
+	overflow: clip;
   flex-shrink: 1;
 }
 .mk-uploader > ol > li > .top > .name > [data-icon] {
@@ -119,7 +120,8 @@ export default defineComponent({
   background: transparent;
   border: none;
   border-radius: 4px;
-  overflow: hidden;
+  overflow: hidden; // overflow: clip; をSafariが対応したら消す
+	overflow: clip;
   grid-column: 2/3;
   grid-row: 2/3;
   z-index: 2;
diff --git a/src/client/ui/chat/index.vue b/src/client/ui/chat/index.vue
index 26c81a1aa9..c106e9a444 100644
--- a/src/client/ui/chat/index.vue
+++ b/src/client/ui/chat/index.vue
@@ -427,7 +427,8 @@ export default defineComponent({
 
 					> .text {
 						white-space: nowrap;
-						overflow: hidden;
+						overflow: hidden; // overflow: clip; をSafariが対応したら消す
+						overflow: clip;
 						text-overflow: ellipsis;
 						font-size: 0.9em;
 					}
@@ -482,7 +483,8 @@ export default defineComponent({
 						padding: 6px 8px;
 						border-radius: 4px;
 						white-space: nowrap;
-						overflow: hidden;
+						overflow: hidden; // overflow: clip; をSafariが対応したら消す
+						overflow: clip;
 						text-overflow: ellipsis;
 
 						&:hover {
@@ -545,7 +547,8 @@ export default defineComponent({
 				}
 
 				> .title {
-					overflow: hidden;
+					overflow: hidden; // overflow: clip; をSafariが対応したら消す
+					overflow: clip;
 					text-overflow: ellipsis;
 					white-space: nowrap;
 					min-width: 0;
@@ -556,7 +559,8 @@ export default defineComponent({
 						font-size: 0.8em;
 						font-weight: normal;
 						white-space: nowrap;
-						overflow: hidden;
+						overflow: hidden; // overflow: clip; をSafariが対応したら消す
+						overflow: clip;
 						text-overflow: ellipsis;
 					}
 				}
diff --git a/src/client/ui/chat/note-header.vue b/src/client/ui/chat/note-header.vue
index cda8ae00e2..a33e5bafed 100644
--- a/src/client/ui/chat/note-header.vue
+++ b/src/client/ui/chat/note-header.vue
@@ -62,7 +62,8 @@ export default defineComponent({
 		display: block;
 		margin: 0 .5em 0 0;
 		padding: 0;
-		overflow: hidden;
+		overflow: hidden; // overflow: clip; をSafariが対応したら消す
+		overflow: clip;
 		font-size: 1em;
 		font-weight: bold;
 		text-decoration: none;
@@ -91,7 +92,8 @@ export default defineComponent({
 
 	> .username {
 		margin: 0 .5em 0 0;
-		overflow: hidden;
+		overflow: hidden; // overflow: clip; をSafariが対応したら消す
+		overflow: clip;
 		text-overflow: ellipsis;
 	}
 
diff --git a/src/client/ui/chat/note-preview.vue b/src/client/ui/chat/note-preview.vue
index 4861473701..6ec66c921b 100644
--- a/src/client/ui/chat/note-preview.vue
+++ b/src/client/ui/chat/note-preview.vue
@@ -50,7 +50,8 @@ export default defineComponent({
 	display: flex;
 	margin: 0;
 	padding: 0;
-	overflow: hidden;
+	overflow: hidden; // overflow: clip; をSafariが対応したら消す
+	overflow: clip;
 	font-size: 0.95em;
 
 	> .avatar {
diff --git a/src/client/ui/chat/note.vue b/src/client/ui/chat/note.vue
index 9312b99d27..3c5c1acfdc 100644
--- a/src/client/ui/chat/note.vue
+++ b/src/client/ui/chat/note.vue
@@ -964,7 +964,8 @@ export default defineComponent({
 		}
 
 		> span {
-			overflow: hidden;
+			overflow: hidden; // overflow: clip; をSafariが対応したら消す
+			overflow: clip;
 			flex-shrink: 1;
 			text-overflow: ellipsis;
 			white-space: nowrap;
@@ -1037,7 +1038,8 @@ export default defineComponent({
 					&.collapsed {
 						position: relative;
 						max-height: 9em;
-						overflow: hidden;
+						overflow: hidden; // overflow: clip; をSafariが対応したら消す
+						overflow: clip;
 
 						> .fade {
 							display: block;
diff --git a/src/client/ui/deck/column.vue b/src/client/ui/deck/column.vue
index d0a39965b1..11e9e536da 100644
--- a/src/client/ui/deck/column.vue
+++ b/src/client/ui/deck/column.vue
@@ -268,7 +268,8 @@ export default defineComponent({
 	--section-padding: 10px;
 
 	height: 100%;
-	overflow: hidden;
+	overflow: hidden; // overflow: clip; をSafariが対応したら消す
+	overflow: clip;
 	contain: content;
 
 	&.draghover {
@@ -358,7 +359,8 @@ export default defineComponent({
 		> .header {
 			display: inline-block;
 			align-items: center;
-			overflow: hidden;
+			overflow: hidden; // overflow: clip; をSafariが対応したら消す
+			overflow: clip;
 			text-overflow: ellipsis;
 			white-space: nowrap;
 		}
diff --git a/src/client/ui/visitor/header.vue b/src/client/ui/visitor/header.vue
index 9a7bf96fc0..7a57a70360 100644
--- a/src/client/ui/visitor/header.vue
+++ b/src/client/ui/visitor/header.vue
@@ -125,7 +125,8 @@ export default defineComponent({
 					display: inline-block;
 					vertical-align: bottom;
 					white-space: nowrap;
-					overflow: hidden;
+					overflow: hidden; // overflow: clip; をSafariが対応したら消す
+					overflow: clip;
 					text-overflow: ellipsis;
 					position: relative;
 
@@ -206,7 +207,8 @@ export default defineComponent({
 		> .title {
 			flex: 1;
 			white-space: nowrap;
-			overflow: hidden;
+			overflow: hidden; // overflow: clip; をSafariが対応したら消す
+			overflow: clip;
 			text-overflow: ellipsis;
 			position: relative;
 			text-align: center;
diff --git a/src/client/widgets/calendar.vue b/src/client/widgets/calendar.vue
index 545072e87b..5bc24cb690 100644
--- a/src/client/widgets/calendar.vue
+++ b/src/client/widgets/calendar.vue
@@ -171,7 +171,8 @@ export default defineComponent({
 
 			> .meter {
 				width: 100%;
-				overflow: hidden;
+				overflow: hidden; // overflow: clip; をSafariが対応したら消す
+				overflow: clip;
 				background: var(--X11);
 				border-radius: 8px;
 
diff --git a/src/client/widgets/federation.vue b/src/client/widgets/federation.vue
index 6e76bc40e9..f05ad65c2f 100644
--- a/src/client/widgets/federation.vue
+++ b/src/client/widgets/federation.vue
@@ -89,7 +89,8 @@ export default defineComponent({
 	$bodyInfoHieght: 16px;
 
 	height: (62px + 1px) + (62px + 1px) + (62px + 1px) + (62px + 1px) + 62px;
-	overflow: hidden;
+	overflow: hidden; // overflow: clip; をSafariが対応したら消す
+	overflow: clip;
 
 	> .instances {
 		.chart-move {
@@ -113,7 +114,8 @@ export default defineComponent({
 
 			> .body {
 				flex: 1;
-				overflow: hidden;
+				overflow: hidden; // overflow: clip; をSafariが対応したら消す
+				overflow: clip;
 				font-size: 0.9em;
 				color: var(--fg);
 
@@ -121,7 +123,8 @@ export default defineComponent({
 					display: block;
 					width: 100%;
 					white-space: nowrap;
-					overflow: hidden;
+					overflow: hidden; // overflow: clip; をSafariが対応したら消す
+					overflow: clip;
 					text-overflow: ellipsis;
 					line-height: $bodyTitleHieght;
 				}
diff --git a/src/client/widgets/rss.vue b/src/client/widgets/rss.vue
index 1140a4252f..3ad801efae 100644
--- a/src/client/widgets/rss.vue
+++ b/src/client/widgets/rss.vue
@@ -80,7 +80,8 @@ export default defineComponent({
 			color: var(--fg);
 			white-space: nowrap;
 			text-overflow: ellipsis;
-			overflow: hidden;
+			overflow: hidden; // overflow: clip; をSafariが対応したら消す
+			overflow: clip;
 
 			&:nth-child(even) {
 				background: rgba(#000, 0.05);
diff --git a/src/client/widgets/trends.vue b/src/client/widgets/trends.vue
index 3734573e3c..b5fc6fb6f0 100644
--- a/src/client/widgets/trends.vue
+++ b/src/client/widgets/trends.vue
@@ -68,7 +68,8 @@ export default defineComponent({
 <style lang="scss" scoped>
 .wbrkwala {
 	height: (62px + 1px) + (62px + 1px) + (62px + 1px) + (62px + 1px) + 62px;
-	overflow: hidden;
+	overflow: hidden; // overflow: clip; をSafariが対応したら消す
+	overflow: clip;
 
 	> .tags {
 		.chart-move {
@@ -83,7 +84,8 @@ export default defineComponent({
 
 			> .tag {
 				flex: 1;
-				overflow: hidden;
+				overflow: hidden; // overflow: clip; をSafariが対応したら消す
+				overflow: clip;
 				font-size: 0.9em;
 				color: var(--fg);
 
@@ -91,7 +93,8 @@ export default defineComponent({
 					display: block;
 					width: 100%;
 					white-space: nowrap;
-					overflow: hidden;
+					overflow: hidden; // overflow: clip; をSafariが対応したら消す
+					overflow: clip;
 					text-overflow: ellipsis;
 					line-height: 18px;
 				}