Troplo/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Fix webkit image blurs

Browse source
This commit is contained in:
Tusooa Zhu 2022-02-20 22:02:31 -05:00
parent 1128cc463c
commit 90b066a744
No known key found for this signature in database
GPG key ID: 7B467EDE43A08224
1 changed files with 19 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
src/components/media_modal/media_modal.vue
View file

@ -133,42 +133,28 @@
}
}
.modal-image-container {
display: flex;
overflow: hidden;
align-items: center;
flex-direction: column;
max-width: 90%;
max-height: 95%;
width: 100%;
height: 100%;
flex-grow: 1;
justify-content: center;
&-inner {
.modal-image-container {
display: flex;
overflow: hidden;
align-items: center;
flex-direction: column;
max-width: 90%;
max-height: 95%;
width: 100%;
height: 100%;
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
&-inner {
width: 100%;
height: 100%;
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
}
}
.modal-image {
max-width: 100%;
max-height: 100%;
min-width: 0;
min-height: 0;
image-orientation: from-image; // NOTE: only FF supports this
animation: 0.1s cubic-bezier(0.7, 0, 1, 0.6) media-fadein;
}
//.modal-image {
// height: 90vh;
// width: 100%;
//}
.description,
.counter {
@ -189,9 +175,8 @@
}
.modal-image {
max-width: 90%;
max-height: 90%;
box-shadow: 0px 5px 15px 0 rgba(0, 0, 0, 0.5);
max-width: 100%;
max-height: 100%;
image-orientation: from-image; // NOTE: only FF supports this
animation: 0.1s cubic-bezier(0.7, 0, 1, 0.6) media-fadein;