diff options
| author | Shpuld Shpludson <shp@cock.li> | 2021-02-22 15:14:23 +0000 |
|---|---|---|
| committer | Shpuld Shpludson <shp@cock.li> | 2021-02-22 15:14:23 +0000 |
| commit | 3d013630aee48863cda5ece9ddf9a291703eb1af (patch) | |
| tree | 04821cfc110ac5361f9955252a67540be6234836 /src | |
| parent | 589ab6510c1effc909ee9f6b64cd7791d3f55ee7 (diff) | |
| parent | c7018057f1df52edd2f02c4cf101e5dccf8d633c (diff) | |
Merge branch 'fix/scroll-lock-jumpiness' into 'develop'
Fix some UI jumpiness on scroll lock
See merge request pleroma/pleroma-fe!1343
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.scss | 6 | ||||
| -rw-r--r-- | src/components/media_modal/media_modal.vue | 10 |
2 files changed, 16 insertions, 0 deletions
diff --git a/src/App.scss b/src/App.scss index 8b91f3de..90d083bb 100644 --- a/src/App.scss +++ b/src/App.scss @@ -586,6 +586,7 @@ nav { color: var(--faint, $fallback--faint); box-shadow: 0px 0px 4px rgba(0,0,0,.6); box-shadow: var(--topBarShadow); + box-sizing: border-box; } .fade-enter-active, .fade-leave-active { @@ -878,6 +879,11 @@ nav { overflow: hidden; height: 100%; + // Get rid of scrollbar on body as scrolling happens on different element + body { + overflow: hidden; + } + // Ensures the fixed position of the mobile browser bars on scroll up / down events. // Prevents the mobile browser bars from overlapping or hiding the message posting form. @media all and (max-width: 800px) { diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue index ea7f7a7f..54bc5335 100644 --- a/src/components/media_modal/media_modal.vue +++ b/src/components/media_modal/media_modal.vue @@ -73,11 +73,21 @@ } } +@keyframes media-fadein { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + .modal-image { max-width: 90%; max-height: 90%; box-shadow: 0px 5px 15px 0 rgba(0, 0, 0, 0.5); image-orientation: from-image; // NOTE: only FF supports this + animation: 0.1s cubic-bezier(0.7, 0, 1, 0.6) media-fadein; } .modal-view-button-arrow { |