From 46c2706b7ecf6e9461f97dd795524f6ab4b59ada Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Mon, 2 Jan 2023 12:15:26 +0900
Subject: [PATCH] perf: use overflow: clip instead of overflow: hidden (#9443)

* use overflow: clip

* revert
---
 packages/frontend/src/components/MkAutocomplete.vue   | 4 ++--
 packages/frontend/src/components/MkButton.vue         | 2 +-
 packages/frontend/src/components/MkNote.vue           | 2 +-
 packages/frontend/src/components/MkNoteDetailed.vue   | 2 +-
 packages/frontend/src/components/MkPoll.vue           | 2 +-
 packages/frontend/src/components/MkSubNoteContent.vue | 2 +-
 packages/frontend/src/components/MkUrlPreview.vue     | 2 +-
 packages/frontend/src/components/global/MkAvatar.vue  | 2 +-
 packages/frontend/src/pages/user/home.vue             | 4 ++--
 packages/frontend/src/ui/deck/column.vue              | 2 +-
 10 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/frontend/src/components/MkAutocomplete.vue b/packages/frontend/src/components/MkAutocomplete.vue
index 1321ab707..a2b020b90 100644
--- a/packages/frontend/src/components/MkAutocomplete.vue
+++ b/packages/frontend/src/components/MkAutocomplete.vue
@@ -384,7 +384,7 @@ onBeforeUnmount(() => {
 	position: fixed;
 	max-width: 100%;
 	margin-top: calc(1em + 8px);
-	overflow: hidden;
+	overflow: clip;
 	transition: top 0.1s ease, left 0.1s ease;
 
 	> ol {
@@ -401,7 +401,7 @@ onBeforeUnmount(() => {
 			align-items: center;
 			padding: 4px 12px;
 			white-space: nowrap;
-			overflow: hidden;
+			overflow: clip;
 			font-size: 0.9em;
 			cursor: default;
 
diff --git a/packages/frontend/src/components/MkButton.vue b/packages/frontend/src/components/MkButton.vue
index 20bce2104..2b1b66da2 100644
--- a/packages/frontend/src/components/MkButton.vue
+++ b/packages/frontend/src/components/MkButton.vue
@@ -207,7 +207,7 @@ function onMousedown(evt: MouseEvent): void {
 		width: 100%;
 		height: 100%;
 		border-radius: 6px;
-		overflow: hidden;
+		overflow: clip;
 
 		::v-deep(div) {
 			position: absolute;
diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
index 11da49f2d..b379a8a7e 100644
--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@@ -468,7 +468,7 @@ function readPromo() {
 					&.collapsed {
 						position: relative;
 						max-height: 9em;
-						overflow: hidden;
+						overflow: clip;
 
 						> .fade {
 							display: block;
diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue
index 14af580b2..79dff69be 100644
--- a/packages/frontend/src/components/MkNoteDetailed.vue
+++ b/packages/frontend/src/components/MkNoteDetailed.vue
@@ -298,7 +298,7 @@ if (appearNote.replyId) {
 .lxwezrsl {
 	position: relative;
 	transition: box-shadow 0.1s ease;
-	overflow: hidden;
+	overflow: clip;
 	contain: content;
 
 	&:focus-visible {
diff --git a/packages/frontend/src/components/MkPoll.vue b/packages/frontend/src/components/MkPoll.vue
index f2e3a8ee4..33e625a05 100644
--- a/packages/frontend/src/components/MkPoll.vue
+++ b/packages/frontend/src/components/MkPoll.vue
@@ -102,7 +102,7 @@ const vote = async (id) => {
 			//border: solid 0.5px var(--divider);
 			background: var(--accentedBg);
 			border-radius: 4px;
-			overflow: hidden;
+			overflow: clip;
 			cursor: pointer;
 
 			> .backdrop {
diff --git a/packages/frontend/src/components/MkSubNoteContent.vue b/packages/frontend/src/components/MkSubNoteContent.vue
index 3015e27b9..55b04e668 100644
--- a/packages/frontend/src/components/MkSubNoteContent.vue
+++ b/packages/frontend/src/components/MkSubNoteContent.vue
@@ -59,7 +59,7 @@ const collapsed = $ref(
 	&.collapsed {
 		position: relative;
 		max-height: 9em;
-		overflow: hidden;
+		overflow: clip;
 
 		> .fade {
 			display: block;
diff --git a/packages/frontend/src/components/MkUrlPreview.vue b/packages/frontend/src/components/MkUrlPreview.vue
index 6b38080f9..046e37c46 100644
--- a/packages/frontend/src/components/MkUrlPreview.vue
+++ b/packages/frontend/src/components/MkUrlPreview.vue
@@ -175,7 +175,7 @@ onUnmounted(() => {
 		font-size: 14px;
 		box-shadow: 0 0 0 1px var(--divider);
 		border-radius: 8px;
-		overflow: hidden;
+		overflow: clip;
 
 		&:hover {
 			text-decoration: none;
diff --git a/packages/frontend/src/components/global/MkAvatar.vue b/packages/frontend/src/components/global/MkAvatar.vue
index 60b8b3b1d..2f8e7945f 100644
--- a/packages/frontend/src/components/global/MkAvatar.vue
+++ b/packages/frontend/src/components/global/MkAvatar.vue
@@ -85,7 +85,7 @@ watch(() => props.user.avatarBlurhash, () => {
 		top: 0;
 		border-radius: 100%;
 		z-index: 1;
-		overflow: hidden;
+		overflow: clip;
 		object-fit: cover;
 		width: 100%;
 		height: 100%;
diff --git a/packages/frontend/src/pages/user/home.vue b/packages/frontend/src/pages/user/home.vue
index 45334a998..4a92074d9 100644
--- a/packages/frontend/src/pages/user/home.vue
+++ b/packages/frontend/src/pages/user/home.vue
@@ -203,12 +203,12 @@ onUnmounted(() => {
 
 			> .main {
 				position: relative;
-				overflow: hidden;
+				overflow: clip;
 
 				> .banner-container {
 					position: relative;
 					height: 250px;
-					overflow: hidden;
+					overflow: clip;
 					background-size: cover;
 					background-position: center;
 
diff --git a/packages/frontend/src/ui/deck/column.vue b/packages/frontend/src/ui/deck/column.vue
index 4e6677fe4..5de5528b1 100644
--- a/packages/frontend/src/ui/deck/column.vue
+++ b/packages/frontend/src/ui/deck/column.vue
@@ -251,7 +251,7 @@ function onDrop(ev) {
 	--deckColumnHeaderHeight: 40px;
 
 	height: 100%;
-	overflow: hidden;
+	overflow: clip;
 	contain: strict;
 
 	&.draghover {