pleroma-fe

commit: 6d8862dc9a587ab7096db6e4952070441ed9cf07
parent: 25cfb04873b4d5f849afa007c5d4dc2844bff79b
Author: Shpuld Shpludson <shp@cock.li>
Date:   Tue, 12 Feb 2019 15:25:18 +0000

Merge branch '300-fixed-background-issue' into 'develop'

Fix fixed background issue

Closes #300

See merge request pleroma/pleroma-fe!518
Diffstat:
M
src/App.js
2
+-
M
src/App.scss
14
++++++++++----
M
src/App.vue
3
++-

3 files changed, 13 insertions(+), 6 deletions(-)
diff --git a/src/App.js b/src/App.js
@@ -66,7 +66,7 @@ export default {
       })
     },
     logo () { return this.$store.state.instance.logo },
-    style () {
+    bgStyle () {
       return {
         '--body-background-image': `url(${this.background})`,
         'background-image': `url(${this.background})`
diff --git a/src/App.scss b/src/App.scss
@@ -1,15 +1,21 @@
 @import './_variables.scss';
 
 #app {
-  background-size: cover;
-  background-attachment: fixed;
-  background-repeat: no-repeat;
-  background-position: 0 50px;
   min-height: 100vh;
   max-width: 100%;
   overflow: hidden;
 }
 
+.app-bg-wrapper {
+  position: fixed;
+  z-index: -1;
+  height: 100%;
+  width: 100%;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: 0 50%;
+}
+
 i {
   user-select: none;
 }
diff --git a/src/App.vue b/src/App.vue
@@ -1,5 +1,6 @@
 <template>
-  <div id="app" v-bind:style="style">
+  <div id="app">
+    <div class="app-bg-wrapper" v-bind:style="bgStyle"></div>
     <nav class='nav-bar container' @click="scrollToTop()" id="nav">
       <div class='logo' :style='logoBgStyle'>
         <div class='mask' :style='logoMaskStyle'></div>