fix: initially wrong position of background image in Parallax component

uikit · Oct 8, 2018 · 7019531 · 7019531
1 parent 89c9807
commit 7019531
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 27 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -16,6 +16,7 @@
 - Fix `scope` command for already scoped css, comments are removed from generated css files
 - Fix Sticky placeholder height on resize
 - Fix starting/stopping of autoplay in Lightbox
+- Fix initially wrong position of background image in Parallax component
 
 ## 3.0.0 rc 17 (September 27, 2018)
 

diff --git a/src/js/mixin/parallax.js b/src/js/mixin/parallax.js
@@ -110,47 +110,41 @@ export default {
 
             data.active = this.matchMedia;
 
-            data.dimEl = {
-                width: this.$el.offsetWidth,
-                height: this.$el.offsetHeight
-            };
-
-            if ('image' in data || !this.covers || !this.bgProps.length) {
+            if (!data.active) {
                 return;
             }
 
-            const src = css(this.$el, 'backgroundImage').replace(/^none|url\(["']?(.+?)["']?\)$/, '$1');
+            if (!data.image && this.covers && this.bgProps.length) {
+                const src = css(this.$el, 'backgroundImage').replace(/^none|url\(["']?(.+?)["']?\)$/, '$1');
 
-            if (!src) {
-                return;
-            }
+                if (src) {
+                    const img = new Image();
+                    img.src = src;
+                    data.image = img;
 
-            const img = new Image();
-            img.src = src;
-            data.image = img;
+                    if (!img.naturalWidth) {
+                        img.onload = () => this.$emit();
+                    }
+                }
 
-            if (!img.naturalWidth) {
-                img.onload = () => this.$emit();
             }
-        },
 
-        write({dimEl, image, active}) {
+            const {image} = data;
 
             if (!image || !image.naturalWidth) {
                 return;
             }
 
-            if (!active) {
-                css(this.$el, {backgroundSize: '', backgroundRepeat: ''});
-                return;
-            }
-
-            const imageDim = {
+            const dimEl = {
+                width: this.$el.offsetWidth,
+                height: this.$el.offsetHeight
+            };
+            const dimImage = {
                 width: image.naturalWidth,
                 height: image.naturalHeight
             };
 
-            let dim = Dimensions.cover(imageDim, dimEl);
+            let dim = Dimensions.cover(dimImage, dimEl);
 
             this.bgProps.forEach(prop => {
 
@@ -173,10 +167,20 @@ export default {
                     }
                 }
 
-                dim = Dimensions.cover(imageDim, dimEl);
+                dim = Dimensions.cover(dimImage, dimEl);
             });
 
-            css(this.$el, {
+            data.dim = dim;
+        },
+
+        write({dim, active}) {
+
+            if (!active) {
+                css(this.$el, {backgroundSize: '', backgroundRepeat: ''});
+                return;
+            }
+
+            dim && css(this.$el, {
                 backgroundSize: `${dim.width}px ${dim.height}px`,
                 backgroundRepeat: 'no-repeat'
             });

diff --git a/src/js/util/lang.js b/src/js/util/lang.js
@@ -214,7 +214,7 @@ export function sortBy(collection, prop) {
 }
 
 export function clamp(number, min = 0, max = 1) {
-    return Math.min(Math.max(number, min), max);
+    return Math.min(Math.max(toNumber(number) || 0, min), max);
 }
 
 export function noop() {}