fix: lazy loading images in Img component in Safari

uikit · Jan 3, 2019 · db69cd9 · db69cd9
1 parent e6b7764
commit db69cd9
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -18,6 +18,7 @@
 - Fix properly resolving css custom properties in scss
 - Fix order of variable assignments in scss
 - Fix background images are shown too large on retina displays in Img component
+- Fix lazy loading images in Img component in Safari
 - Limit positioned element to container width and margin in Position component
 
 ## 3.0.0 rc 25 (November 30, 2018)

diff --git a/src/js/core/img.js b/src/js/core/img.js
@@ -1,4 +1,4 @@
-import {createEvent, css, Dimensions, endsWith, getImage, height, includes, isInView, isNumeric, noop, queryAll, startsWith, toFloat, trigger, width} from 'uikit-util';
+import {createEvent, css, Dimensions, endsWith, getImage, height, includes, isInView, isNumeric, isVisible, noop, queryAll, startsWith, toFloat, trigger, width} from 'uikit-util';
 
 export default {
 
@@ -87,6 +87,10 @@ export default {
                 return;
             }
 
+            if (this.$el.src && isVisible(this.$el) && !height(this.$el)) {
+                return;
+            }
+
             return {
                 image: getImage(this.dataSrc, this.dataSrcset, this.sizes).then(img => {