commit: 90b066a7443ecb37b1a72d3b306471d0ad75c68c
parent 1128cc463c4b16c41ab21c554646a8104ba58826
Author: Tusooa Zhu <tusooa@kazv.moe>
Date: Sun, 20 Feb 2022 22:02:31 -0500
Fix webkit image blurs
Diffstat:
1 file changed, 19 insertions(+), 34 deletions(-)
diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
@@ -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;
- }
-}
-
-.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%;
-//}
+ &-inner {
+ width: 100%;
+ height: 100%;
+ flex-grow: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ }
+ }
.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;