Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix safari display:grid lag

Browse Source
This commit is contained in:
psychedelicious 2022-10-10 08:41:30 +08:00 committed by Any-Winter-4079
parent 789714b0b1
commit 12413b0be6
4 changed files with 21 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/dist/assets/index.4ceb640a.css → frontend/dist/assets/index.58175ea1.css vendored
View File

File diff suppressed because one or more lines are too long

2
frontend/dist/index.html vendored
View File

@ -7,7 +7,7 @@
<title>InvokeAI - A Stable Diffusion Toolkit</title> <title>InvokeAI - A Stable Diffusion Toolkit</title>
<link rel="shortcut icon" type="icon" href="/assets/favicon.0d253ced.ico" /> <link rel="shortcut icon" type="icon" href="/assets/favicon.0d253ced.ico" />
<script type="module" crossorigin src="/assets/index.989a0ca2.js"></script> <script type="module" crossorigin src="/assets/index.989a0ca2.js"></script>
<link rel="stylesheet" href="/assets/index.4ceb640a.css"> <link rel="stylesheet" href="/assets/index.58175ea1.css">
</head> </head>
<body> <body>

24
frontend/src/features/gallery/HoverableImage.scss
View File

@ -1,6 +1,6 @@
.hoverable-image { .hoverable-image {
display: grid; display: flex;
grid-template-areas: 'hoverable-image'; justify-content: center;
transition: transform 0.2s ease-out; transition: transform 0.2s ease-out;
&:hover { &:hover {
@ -9,12 +9,6 @@
z-index: 2; z-index: 2;
} }
.hoverable-image-image,
.hoverable-image-content,
.hoverable-image-icons {
grid-area: hoverable-image;
}
.hoverable-image-image { .hoverable-image-image {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -24,8 +18,14 @@
} }
.hoverable-image-content { .hoverable-image-content {
display: grid; display: flex;
place-items: center; position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
.hoverable-image-check { .hoverable-image-check {
fill: var(--status-good-color); fill: var(--status-good-color);
@ -33,23 +33,23 @@
} }
.hoverable-image-icons { .hoverable-image-icons {
grid-area: hoverable-image;
position: absolute; position: absolute;
bottom: -2rem; bottom: -2rem;
display: grid; display: grid;
width: min-content;
grid-template-columns: repeat(2, max-content); grid-template-columns: repeat(2, max-content);
border-radius: 0.4rem; border-radius: 0.4rem;
background-color: var(--background-color-secondary); background-color: var(--background-color-secondary);
padding: 0.2rem; padding: 0.2rem;
gap: 0.2rem; gap: 0.2rem;
grid-auto-rows: max-content; grid-auto-rows: max-content;
place-self: center;
button { button {
width: 12px; width: 12px;
height: 12px; height: 12px;
border-radius: 0.2rem; border-radius: 0.2rem;
padding: 10px 0; padding: 10px 0;
flex-shrink: 2;
svg { svg {
width: 12px; width: 12px;
height: 12px; height: 12px;

14
frontend/src/features/gallery/ImageGallery.scss
View File

@ -21,8 +21,8 @@
background-color: var(--tab-color); background-color: var(--tab-color);
padding: 1rem; padding: 1rem;
animation: slideOut 0.3s ease-out; animation: slideOut 0.3s ease-out;
display: grid; display: flex;
grid-auto-rows: max-content; flex-direction: column;
row-gap: 1rem; row-gap: 1rem;
border-radius: 0.5rem; border-radius: 0.5rem;
border-left-width: 0.2rem; border-left-width: 0.2rem;
@ -31,8 +31,7 @@
} }
.image-gallery-header { .image-gallery-header {
display: grid; display: flex;
grid-template-columns: auto max-content;
align-items: center; align-items: center;
h1 { h1 {
@ -48,7 +47,8 @@
} }
.image-gallery-container { .image-gallery-container {
display: grid; display: flex;
flex-direction: column;
gap: 1rem; gap: 1rem;
max-height: $app-gallery-popover-height; max-height: $app-gallery-popover-height;
overflow-y: scroll; overflow-y: scroll;
@ -75,7 +75,7 @@
} }
// .image-gallery { // .image-gallery {
// display: grid; // display: flex;
// grid-template-columns: repeat(auto-fill, minmax(80px, auto)); // grid-template-columns: repeat(auto-fill, minmax(80px, auto));
// gap: 0.5rem; // gap: 0.5rem;
// justify-items: center; // justify-items: center;
@ -98,7 +98,7 @@
} }
.image-gallery-container-placeholder { .image-gallery-container-placeholder {
display: grid; display: flex;
background-color: var(--background-color-secondary); background-color: var(--background-color-secondary);
border-radius: 0.5rem; border-radius: 0.5rem;
place-items: center; place-items: center;