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

Fix fixed background issue

Closes #300

See merge request pleroma/pleroma-fe!518

3 files changed, 13 insertions, 6 deletions

diff --git a/src/App.js b/src/App.js
index 200254f3..311bf484 100644
--- 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
index 1eaed6ea..52484f59 100644
--- 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
index 7541928f..fa5736e5 100644
--- 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>