Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages 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
Show stats 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; z-index: 65535;
max-width: 100%; max-width: 100%;
margin-top: calc(1em + 8px); margin-top: calc(1em + 8px);
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
transition: top 0.1s ease, left 0.1s ease; transition: top 0.1s ease, left 0.1s ease;
> ol { > ol {
@ -418,7 +419,8 @@ export default defineComponent({
align-items: center; align-items: center;
padding: 4px 12px; padding: 4px 12px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
font-size: 0.9em; font-size: 0.9em;
cursor: default; cursor: default;
@ -427,7 +429,8 @@ export default defineComponent({
} }
* { * {
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
text-overflow: ellipsis; text-overflow: ellipsis;
} }

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

@ -66,7 +66,8 @@ export default defineComponent({
<style lang="scss" scoped> <style lang="scss" scoped>
.eftoefju { .eftoefju {
display: block; display: block;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
width: 100%; width: 100%;
&:hover { &:hover {

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

@ -342,7 +342,8 @@ export default defineComponent({
text-align: center; text-align: center;
word-break: break-all; word-break: break-all;
color: var(--fg); color: var(--fg);
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
> .ext { > .ext {
opacity: 0.5; opacity: 0.5;

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

@ -261,7 +261,8 @@ export default defineComponent({
display: inline-block; display: inline-block;
min-width: 16px; min-width: 16px;
max-width: 150px; max-width: 150px;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} }

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

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

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

@ -101,7 +101,8 @@ export default defineComponent({
top: 0; top: 0;
border-radius: 100%; border-radius: 100%;
z-index: 1; z-index: 1;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
object-fit: cover; object-fit: cover;
width: 100%; width: 100%;
height: 100%; height: 100%;

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

@ -126,7 +126,8 @@ export default defineComponent({
&.nowrap { &.nowrap {
white-space: pre; white-space: pre;
word-wrap: normal; // https://codeday.me/jp/qa/20190424/690106.html word-wrap: normal; // https://codeday.me/jp/qa/20190424/690106.html
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
text-overflow: ellipsis; text-overflow: ellipsis;
} }

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

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

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

@ -44,7 +44,8 @@ export default defineComponent({
height: $height; height: $height;
border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
color: #fff; color: #fff;
> .icon { > .icon {

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

@ -62,7 +62,8 @@ export default defineComponent({
width: 100%; width: 100%;
border-radius: 4px; border-radius: 4px;
margin-top: 4px; margin-top: 4px;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
> .download, > .download,
> .sensitive { > .sensitive {
@ -77,7 +78,8 @@ export default defineComponent({
} }
> b { > b {
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
text-overflow: ellipsis; text-overflow: ellipsis;
} }

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

@ -143,7 +143,8 @@ export default defineComponent({
> a { > a {
display: block; display: block;
cursor: zoom-in; cursor: zoom-in;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-position: center; background-position: center;

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

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

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

@ -78,7 +78,8 @@ export default defineComponent({
align-items: center; align-items: center;
font-size: 3.5em; font-size: 3.5em;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
background-position: center; background-position: center;
background-size: cover; background-size: cover;
width: 100%; width: 100%;

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

@ -892,7 +892,8 @@ export default defineComponent({
.note { .note {
position: relative; position: relative;
transition: box-shadow 0.1s ease; transition: box-shadow 0.1s ease;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
contain: content; contain: content;
&:focus-visible { &:focus-visible {
@ -952,7 +953,8 @@ export default defineComponent({
} }
> span { > span {
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
flex-shrink: 1; flex-shrink: 1;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;

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

@ -61,7 +61,8 @@ export default defineComponent({
display: block; display: block;
margin: 0 .5em 0 0; margin: 0 .5em 0 0;
padding: 0; padding: 0;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
font-size: 1em; font-size: 1em;
font-weight: bold; font-weight: bold;
text-decoration: none; text-decoration: none;
@ -90,7 +91,8 @@ export default defineComponent({
> .username { > .username {
margin: 0 .5em 0 0; margin: 0 .5em 0 0;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
text-overflow: ellipsis; text-overflow: ellipsis;
} }

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

@ -50,7 +50,8 @@ export default defineComponent({
display: flex; display: flex;
margin: 0; margin: 0;
padding: 0; padding: 0;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
font-size: 0.95em; font-size: 0.95em;
> .avatar { > .avatar {

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

@ -867,7 +867,8 @@ export default defineComponent({
.tkcbzcuz { .tkcbzcuz {
position: relative; position: relative;
transition: box-shadow 0.1s ease; transition: box-shadow 0.1s ease;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
contain: content; contain: content;
// これらの指定はパフォーマンス向上には有効だが、ノートの高さは一定でないため、 // これらの指定はパフォーマンス向上には有効だが、ノートの高さは一定でないため、
@ -954,7 +955,8 @@ export default defineComponent({
} }
> span { > span {
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
flex-shrink: 1; flex-shrink: 1;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
@ -1026,7 +1028,8 @@ export default defineComponent({
&.collapsed { &.collapsed {
position: relative; position: relative;
max-height: 9em; max-height: 9em;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
> .fade { > .fade {
display: block; display: block;

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

@ -257,7 +257,8 @@ export default defineComponent({
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
min-width: 0; min-width: 0;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
} }
> .time { > .time {
@ -268,7 +269,8 @@ export default defineComponent({
> .text { > .text {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
text-overflow: ellipsis; text-overflow: ellipsis;
> [data-icon] { > [data-icon] {

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

@ -112,7 +112,8 @@ export default defineComponent({
padding: 4px 8px; padding: 4px 8px;
border: solid 1px var(--divider); border: solid 1px var(--divider);
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
cursor: pointer; cursor: pointer;
&:hover { &:hover {

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

@ -127,7 +127,8 @@ export default defineComponent({
height: 64px; height: 64px;
margin-right: 4px; margin-right: 4px;
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
cursor: move; cursor: move;
&:hover > .remove { &:hover > .remove {

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

@ -390,7 +390,8 @@ export default defineComponent({
font-size: $ui-font-size; font-size: $ui-font-size;
line-height: 3rem; line-height: 3rem;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
white-space: nowrap; white-space: nowrap;
width: 100%; width: 100%;
text-align: left; text-align: left;

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

@ -67,7 +67,8 @@ export default defineComponent({
height: 100%; height: 100%;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
} }
} }
</style> </style>

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

@ -124,7 +124,8 @@ export default defineComponent({
text-decoration: none; text-decoration: none;
background: var(--buttonBg); background: var(--buttonBg);
border-radius: 999px; border-radius: 999px;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
&:not(:disabled):hover { &:not(:disabled):hover {
background: var(--buttonHoverBg); background: var(--buttonHoverBg);
@ -212,7 +213,8 @@ export default defineComponent({
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 6px; border-radius: 6px;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
::v-deep(div) { ::v-deep(div) {
position: absolute; position: absolute;

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

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

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

@ -298,7 +298,8 @@ export default defineComponent({
transform: scale(.75); transform: scale(.75);
white-space: nowrap; white-space: nowrap;
width: 133%; width: 133%;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
text-overflow: ellipsis; text-overflow: ellipsis;
> .warning { > .warning {
@ -354,7 +355,8 @@ export default defineComponent({
display: inline-block; display: inline-block;
min-width: 16px; min-width: 16px;
max-width: 150px; max-width: 150px;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} }

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

@ -155,7 +155,8 @@ export default defineComponent({
font-size: 0.9em; font-size: 0.9em;
line-height: 20px; line-height: 20px;
text-align: center; text-align: center;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
text-overflow: ellipsis; text-overflow: ellipsis;
&.danger { &.danger {

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

@ -89,7 +89,8 @@ export default defineComponent({
<style lang="scss" scoped> <style lang="scss" scoped>
.ebkgoccj { .ebkgoccj {
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
contain: content; contain: content;
@ -123,7 +124,8 @@ export default defineComponent({
padding-left: 32px; padding-left: 32px;
font-weight: bold; font-weight: bold;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
text-overflow: ellipsis; text-overflow: ellipsis;
pointer-events: none; pointer-events: none;

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

@ -89,7 +89,8 @@ export default defineComponent({
pointer-events: none; pointer-events: none;
font-size: 16px; font-size: 16px;
color: var(--inputLabel); color: var(--inputLabel);
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
} }
> input { > input {

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

@ -388,7 +388,8 @@ export default defineComponent({
z-index: 5000; z-index: 5000;
> .body { > .body {
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
contain: content; contain: content;
@ -418,7 +419,8 @@ export default defineComponent({
position: relative; position: relative;
line-height: $height; line-height: $height;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
text-overflow: ellipsis; text-overflow: ellipsis;
text-align: center; text-align: center;
cursor: move; cursor: move;

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

@ -244,7 +244,8 @@ export default defineComponent({
font-size: 14px; font-size: 14px;
box-shadow: 0 0 0 1px var(--divider); box-shadow: 0 0 0 1px var(--divider);
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
&:hover { &:hover {
text-decoration: none; text-decoration: none;
@ -326,7 +327,8 @@ export default defineComponent({
&.compact { &.compact {
> article { > article {
> header h1, p, footer { > header h1, p, footer {
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} }

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

@ -110,7 +110,8 @@ export default defineComponent({
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 3; -webkit-line-clamp: 3;
-webkit-box-orient: vertical; -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; position: absolute;
z-index: 11000; z-index: 11000;
width: 300px; width: 300px;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
transform-origin: center top; transform-origin: center top;
> .info { > .info {

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

@ -66,7 +66,8 @@ export default defineComponent({
height: 350px; height: 350px;
background: var(--panel); background: var(--panel);
border-radius: var(--radius); border-radius: var(--radius);
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -127,7 +128,8 @@ export default defineComponent({
> .body { > .body {
padding: 0 8px; padding: 0 8px;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
> .name { > .name {
display: block; display: block;

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

@ -141,7 +141,8 @@ export default defineComponent({
> *:nth-child(2) { > *:nth-child(2) {
flex: 1 1 auto; flex: 1 1 auto;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
text-overflow: ellipsis; text-overflow: ellipsis;
> span:first-child { > span:first-child {

2
src/client/pages/about-misskey.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div style="overflow: hidden;"> <div style="overflow: hidden; overflow: clip;">
<FormBase class="znqjceqz"> <FormBase class="znqjceqz">
<div id="debug"></div> <div id="debug"></div>
<section class="_formItem about"> <section class="_formItem about">

6
src/client/pages/follow-requests.vue
View file

@ -104,7 +104,8 @@ export default defineComponent({
display: block; display: block;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
margin: 0; margin: 0;
} }
@ -124,7 +125,8 @@ export default defineComponent({
width: 55%; width: 55%;
line-height: 42px; line-height: 42px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
text-overflow: ellipsis; text-overflow: ellipsis;
opacity: 0.7; opacity: 0.7;
font-size: 14px; font-size: 14px;

18
src/client/pages/instance/emojis.vue
View file

@ -178,17 +178,20 @@ export default defineComponent({
> .body { > .body {
padding: 0 0 0 8px; padding: 0 0 0 8px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
> .name { > .name {
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
} }
> .info { > .info {
opacity: 0.5; opacity: 0.5;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
} }
} }
} }
@ -219,17 +222,20 @@ export default defineComponent({
> .body { > .body {
padding: 0 0 0 8px; padding: 0 0 0 8px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
> .name { > .name {
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
} }
> .info { > .info {
opacity: 0.5; opacity: 0.5;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
} }
} }
} }

9
src/client/pages/messaging/index.vue
View file

@ -226,12 +226,14 @@ export default defineComponent({
align-items: center; align-items: center;
margin-bottom: 2px; margin-bottom: 2px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
> .name { > .name {
margin: 0; margin: 0;
padding: 0; padding: 0;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 1em; font-size: 1em;
font-weight: bold; font-weight: bold;
@ -262,7 +264,8 @@ export default defineComponent({
display: block; display: block;
margin: 0 0 0 0; margin: 0 0 0 0;
padding: 0; padding: 0;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
overflow-wrap: break-word; overflow-wrap: break-word;
font-size: 1.1em; font-size: 1.1em;
color: var(--faceText); color: var(--faceText);

9
src/client/pages/messaging/messaging-room.message.vue
View file

@ -154,7 +154,8 @@ export default defineComponent({
display: block; display: block;
margin: 0; margin: 0;
padding: 0; padding: 0;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
overflow-wrap: break-word; overflow-wrap: break-word;
font-size: 1em; font-size: 1em;
color: rgba(#000, 0.5); color: rgba(#000, 0.5);
@ -164,7 +165,8 @@ export default defineComponent({
display: block; display: block;
margin: 0; margin: 0;
padding: 12px 18px; padding: 12px 18px;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
overflow-wrap: break-word; overflow-wrap: break-word;
word-break: break-word; word-break: break-word;
font-size: 1em; font-size: 1em;
@ -182,7 +184,8 @@ export default defineComponent({
display: block; display: block;
max-width: 100%; max-width: 100%;
border-radius: 16px; border-radius: 16px;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
text-decoration: none; text-decoration: none;
&:hover { &:hover {

3
src/client/pages/page-editor/page-editor.container.vue
View file

@ -74,7 +74,8 @@ export default defineComponent({
<style lang="scss" scoped> <style lang="scss" scoped>
.cpjygsrt { .cpjygsrt {
position: relative; position: relative;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
background: var(--panel); background: var(--panel);
border: solid 2px var(--X12); border: solid 2px var(--X12);
border-radius: 6px; border-radius: 6px;

3
src/client/pages/reversi/game.board.vue
View file

@ -434,7 +434,8 @@ export default defineComponent({
> div { > div {
background: transparent; background: transparent;
border-radius: 6px; border-radius: 6px;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
* { * {
pointer-events: none; pointer-events: none;

3
src/client/pages/reversi/game.setting.vue
View file

@ -333,7 +333,8 @@ export default defineComponent({
background: transparent; background: transparent;
border: solid 2px var(--divider); border: solid 2px var(--divider);
border-radius: 6px; border-radius: 6px;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
cursor: pointer; cursor: pointer;
* { * {

3
src/client/pages/settings/drive.vue
View file

@ -230,7 +230,8 @@ export default defineComponent({
$size: 12px; $size: 12px;
background: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.1);
border-radius: ($size / 2); border-radius: ($size / 2);
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
> div { > div {
height: $size; height: $size;

3
src/client/pages/settings/security.vue
View file

@ -144,7 +144,8 @@ export default defineComponent({
flex: 1; flex: 1;
min-width: 0; min-width: 0;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
text-overflow: ellipsis; text-overflow: ellipsis;
margin-right: 12px; margin-right: 12px;
} }

3
src/client/pages/settings/theme.vue
View file

@ -184,7 +184,8 @@ export default defineComponent({
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
padding: 0 100px; padding: 0 100px;
transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0);

24
src/client/pages/user/index.vue
View file

@ -369,7 +369,8 @@ export default defineComponent({
position: relative; position: relative;
height: 450px; height: 450px;
border-radius: 16px; border-radius: 16px;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
@ -472,7 +473,8 @@ export default defineComponent({
> .name { > .name {
width: 30%; width: 30%;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
font-weight: bold; font-weight: bold;
@ -480,7 +482,8 @@ export default defineComponent({
> .value { > .value {
width: 70%; width: 70%;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
margin: 0; margin: 0;
@ -542,7 +545,8 @@ export default defineComponent({
.ftskorzw.narrow { .ftskorzw.narrow {
max-width: 100vw; max-width: 100vw;
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
> .punished { > .punished {
font-size: 0.8em; font-size: 0.8em;
@ -553,12 +557,14 @@ export default defineComponent({
> .main { > .main {
position: relative; position: relative;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
> .banner-container { > .banner-container {
position: relative; position: relative;
height: 250px; height: 250px;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
@ -703,7 +709,8 @@ export default defineComponent({
> .name { > .name {
width: 30%; width: 30%;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
font-weight: bold; font-weight: bold;
@ -712,7 +719,8 @@ export default defineComponent({
> .value { > .value {
width: 70%; width: 70%;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
margin: 0; margin: 0;

3
src/client/pages/welcome.entrance.a.vue
View file

@ -167,7 +167,8 @@ export default defineComponent({
margin: auto; margin: auto;
width: 500px; width: 500px;
height: calc(100% - 128px); 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%); -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%); 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%);

3
src/client/pages/welcome.entrance.b.vue
View file

@ -151,7 +151,8 @@ export default defineComponent({
margin: auto; margin: auto;
width: 500px; width: 500px;
height: calc(100% - 128px); 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%); -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%); 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%);
} }

3
src/client/pages/welcome.setup.vue
View file

@ -71,7 +71,8 @@ export default defineComponent({
.mk-setup { .mk-setup {
border-radius: var(--radius); border-radius: var(--radius);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
> h1 { > h1 {
margin: 0; margin: 0;

11
src/client/style.scss
View file

@ -241,7 +241,8 @@ hr {
border-radius: var(--radius); border-radius: var(--radius);
//border: var(--panelBorder); //border: var(--panelBorder);
box-shadow: var(--panelShadow); box-shadow: var(--panelShadow);
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
} }
._card { ._card {
@ -457,6 +458,14 @@ hr {
opacity: 0.7; opacity: 0.7;
} }
// TODO: refactor: 全てのvueファイル中の text-overflow: ellipsis; している箇所をこのクラスを使って置き換える
._oneline {
white-space: nowrap;
overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
text-overflow: ellipsis;
}
._monospace { ._monospace {
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace; font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
} }

3
src/client/ui/_common_/header.vue
View file

@ -132,7 +132,8 @@ export default defineComponent({
display: inline-block; display: inline-block;
vertical-align: bottom; vertical-align: bottom;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
text-overflow: ellipsis; text-overflow: ellipsis;
padding: 0 16px; padding: 0 16px;
position: relative; position: relative;

6
src/client/ui/_common_/upload.vue
View file

@ -89,7 +89,8 @@ export default defineComponent({
font-size: 0.8em; font-size: 0.8em;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
flex-shrink: 1; flex-shrink: 1;
} }
.mk-uploader > ol > li > .top > .name > [data-icon] { .mk-uploader > ol > li > .top > .name > [data-icon] {
@ -119,7 +120,8 @@ export default defineComponent({
background: transparent; background: transparent;
border: none; border: none;
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
grid-column: 2/3; grid-column: 2/3;
grid-row: 2/3; grid-row: 2/3;
z-index: 2; z-index: 2;

12
src/client/ui/chat/index.vue
View file

@ -427,7 +427,8 @@ export default defineComponent({
> .text { > .text {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 0.9em; font-size: 0.9em;
} }
@ -482,7 +483,8 @@ export default defineComponent({
padding: 6px 8px; padding: 6px 8px;
border-radius: 4px; border-radius: 4px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
text-overflow: ellipsis; text-overflow: ellipsis;
&:hover { &:hover {
@ -545,7 +547,8 @@ export default defineComponent({
} }
> .title { > .title {
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
min-width: 0; min-width: 0;
@ -556,7 +559,8 @@ export default defineComponent({
font-size: 0.8em; font-size: 0.8em;
font-weight: normal; font-weight: normal;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
} }

6
src/client/ui/chat/note-header.vue
View file

@ -62,7 +62,8 @@ export default defineComponent({
display: block; display: block;
margin: 0 .5em 0 0; margin: 0 .5em 0 0;
padding: 0; padding: 0;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
font-size: 1em; font-size: 1em;
font-weight: bold; font-weight: bold;
text-decoration: none; text-decoration: none;
@ -91,7 +92,8 @@ export default defineComponent({
> .username { > .username {
margin: 0 .5em 0 0; margin: 0 .5em 0 0;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
text-overflow: ellipsis; text-overflow: ellipsis;
} }

3
src/client/ui/chat/note-preview.vue
View file

@ -50,7 +50,8 @@ export default defineComponent({
display: flex; display: flex;
margin: 0; margin: 0;
padding: 0; padding: 0;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
font-size: 0.95em; font-size: 0.95em;
> .avatar { > .avatar {

6
src/client/ui/chat/note.vue
View file

@ -964,7 +964,8 @@ export default defineComponent({
} }
> span { > span {
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
flex-shrink: 1; flex-shrink: 1;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
@ -1037,7 +1038,8 @@ export default defineComponent({
&.collapsed { &.collapsed {
position: relative; position: relative;
max-height: 9em; max-height: 9em;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
> .fade { > .fade {
display: block; display: block;

6
src/client/ui/deck/column.vue
View file

@ -268,7 +268,8 @@ export default defineComponent({
--section-padding: 10px; --section-padding: 10px;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
contain: content; contain: content;
&.draghover { &.draghover {
@ -358,7 +359,8 @@ export default defineComponent({
> .header { > .header {
display: inline-block; display: inline-block;
align-items: center; align-items: center;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }

6
src/client/ui/visitor/header.vue
View file

@ -125,7 +125,8 @@ export default defineComponent({
display: inline-block; display: inline-block;
vertical-align: bottom; vertical-align: bottom;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
text-overflow: ellipsis; text-overflow: ellipsis;
position: relative; position: relative;
@ -206,7 +207,8 @@ export default defineComponent({
> .title { > .title {
flex: 1; flex: 1;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
text-overflow: ellipsis; text-overflow: ellipsis;
position: relative; position: relative;
text-align: center; text-align: center;

3
src/client/widgets/calendar.vue
View file

@ -171,7 +171,8 @@ export default defineComponent({
> .meter { > .meter {
width: 100%; width: 100%;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
background: var(--X11); background: var(--X11);
border-radius: 8px; border-radius: 8px;

9
src/client/widgets/federation.vue
View file

@ -89,7 +89,8 @@ export default defineComponent({
$bodyInfoHieght: 16px; $bodyInfoHieght: 16px;
height: (62px + 1px) + (62px + 1px) + (62px + 1px) + (62px + 1px) + 62px; height: (62px + 1px) + (62px + 1px) + (62px + 1px) + (62px + 1px) + 62px;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
> .instances { > .instances {
.chart-move { .chart-move {
@ -113,7 +114,8 @@ export default defineComponent({
> .body { > .body {
flex: 1; flex: 1;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
font-size: 0.9em; font-size: 0.9em;
color: var(--fg); color: var(--fg);
@ -121,7 +123,8 @@ export default defineComponent({
display: block; display: block;
width: 100%; width: 100%;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
text-overflow: ellipsis; text-overflow: ellipsis;
line-height: $bodyTitleHieght; line-height: $bodyTitleHieght;
} }

3
src/client/widgets/rss.vue
View file

@ -80,7 +80,8 @@ export default defineComponent({
color: var(--fg); color: var(--fg);
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
&:nth-child(even) { &:nth-child(even) {
background: rgba(#000, 0.05); background: rgba(#000, 0.05);

9
src/client/widgets/trends.vue
View file

@ -68,7 +68,8 @@ export default defineComponent({
<style lang="scss" scoped> <style lang="scss" scoped>
.wbrkwala { .wbrkwala {
height: (62px + 1px) + (62px + 1px) + (62px + 1px) + (62px + 1px) + 62px; height: (62px + 1px) + (62px + 1px) + (62px + 1px) + (62px + 1px) + 62px;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
> .tags { > .tags {
.chart-move { .chart-move {
@ -83,7 +84,8 @@ export default defineComponent({
> .tag { > .tag {
flex: 1; flex: 1;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
font-size: 0.9em; font-size: 0.9em;
color: var(--fg); color: var(--fg);
@ -91,7 +93,8 @@ export default defineComponent({
display: block; display: block;
width: 100%; width: 100%;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden; // overflow: clip; をSafariが対応したら消す
overflow: clip;
text-overflow: ellipsis; text-overflow: ellipsis;
line-height: 18px; line-height: 18px;
} }