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 1321ab7076..a2b020b900 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 20bce2104b..2b1b66da29 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 11da49f2da..b379a8a7e4 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 14af580b26..79dff69be5 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 f2e3a8ee4d..33e625a058 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 3015e27b9d..55b04e6686 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 6b38080f92..046e37c46b 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 60b8b3b1db..2f8e7945fc 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 45334a998b..4a92074d93 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 4e6677fe4a..5de5528b1d 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 {