sim1222/test1
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

perf: use overflow: clip instead of hidden

Browse Source
This commit is contained in:
syuilo
2021-02-27 11:18:53 +09:00
parent 377b0399a0
commit 06e817af59
62 changed files with 217 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/client/components/autocomplete.vue
View File

@ -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;
}

3
src/client/components/channel-preview.vue
View File

@ -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 {

3
src/client/components/drive.file.vue
View File

@ -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;

3
src/client/components/form/input.vue
View File

@ -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;
}

3
src/client/components/form/link.vue
View File

@ -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;
}

3
src/client/components/global/avatar.vue
View File

@ -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%;

3
src/client/components/global/misskey-flavored-markdown.vue
View File

@ -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;
}

3
src/client/components/instance-stats.vue
View File

@ -692,7 +692,8 @@ export default defineComponent({
> dd {
text-overflow: ellipsis;
overflow: hidden;
overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
white-space: nowrap;
}

3
src/client/components/instance-ticker.vue
View File

@ -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 {

6
src/client/components/media-banner.vue
View File

@ -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;
}

3
src/client/components/media-image.vue
View File

@ -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;

3
src/client/components/media-list.vue
View File

@ -105,7 +105,8 @@ export default defineComponent({
grid-gap: 4px;
> * {
overflow: hidden;
overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
border-radius: 6px;
}

3
src/client/components/media-video.vue
View File

@ -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%;

6
src/client/components/note-detailed.vue
View File

@ -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;

6
src/client/components/note-header.vue
View File

@ -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;
}

3
src/client/components/note-preview.vue
View File

@ -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 {

9
src/client/components/note.vue
View File

@ -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;

6
src/client/components/notification.vue
View File

@ -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] {

3
src/client/components/poll.vue
View File

@ -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 {

3
src/client/components/post-form-attaches.vue
View File

@ -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 {

3
src/client/components/sidebar.vue
View File

@ -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;

3
src/client/components/toast.vue
View File

@ -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>

6
src/client/components/ui/button.vue
View File

@ -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;

3
src/client/components/ui/container.vue
View File

@ -116,7 +116,8 @@ export default defineComponent({
.ukygtjoj {
position: relative;
overflow: hidden;
overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
&.naked {
background: transparent !important;

6
src/client/components/ui/input.vue
View File

@ -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;
}

3
src/client/components/ui/menu.vue
View File

@ -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 {

6
src/client/components/ui/modal-window.vue
View File

@ -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;

3
src/client/components/ui/range.vue
View File

@ -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 {

6
src/client/components/ui/window.vue
View File

@ -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;

6
src/client/components/url-preview.vue
View File

@ -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;
}

3
src/client/components/user-info.vue
View File

@ -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;
}
}

3
src/client/components/user-preview.vue
View File

@ -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 {

6
src/client/components/users-dialog.vue
View File

@ -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;

3
src/client/components/visibility-picker.vue
View File

@ -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 {