easy-parallax - npm Package Compare versions

Comparing version 2.0.3 to 2.0.4

dist/easy-parallax.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.easyParallax=e():t.easyParallax=e()}(window,function(){return(n={},a.m=i=[function(t,e){t.exports=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}},function(t,e){function n(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}t.exports=function(t,e,i){return e&&n(t.prototype,e),i&&n(t,i),t}},function(t,e,i){var n=i(4),a=i(5),o=i(6);t.exports=function(t,e){return n(t)||a(t,e)||o()}},function(t,e){t.exports=function(t,e,i){return e in t?Object.defineProperty(t,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[e]=i,t}},function(t,e){t.exports=function(t){if(Array.isArray(t))return t}},function(t,e){t.exports=function(t,e){var i=[],n=!0,a=!1,o=void 0;try{for(var r,s=t[Symbol.iterator]();!(n=(r=s.next()).done)&&(i.push(r.value),!e||i.length!==e);n=!0);}catch(t){a=!0,o=t}finally{try{n||null==s.return||s.return()}finally{if(a)throw o}}return i}},function(t,e){t.exports=function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}},function(t,e,i){"use strict";i.r(e);var n=i(0),d=i.n(n),a=i(1),o=i.n(a),r=i(2),s=i.n(r),l=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(t){setTimeout(t,1e3/60)};function g(t,e){return t.ownerDocument.defaultView.getComputedStyle(t).getPropertyValue(e)}function p(t,e){for(var i=0,n=Object.entries(e);i<n.length;i++){var a=s()(n[i],2),o=a[0],r=a[1];t.style[o]=r}}var h=i(3),f=i.n(h);function m(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),i.push.apply(i,n)}return i}var c=function(){function u(t,e){var i=this,n=2<arguments.length&&void 0!==arguments[2]?arguments[2]:{},a=n.speed,o=void 0===a?.6:a,r=n.type,s=void 0===r?"scroll":r;if(d()(this,u),this.stage=t,this.element=e,this.options={type:s,speed:o},this.instanceID=this.stage.nextInstanceID(),"IMG"===e.tagName){if(this.container=t.document.createElement("div"),e.parentElement)e.parentElement.insertBefore(this.container,e);else e.getRootNode().insertBefore(this.container,e);this.container.appendChild(e),this.image=e,this.useImgTag=!0}else if(g(e,"background-image")){var l=g(this.container=e,"background-image");this.src=l.match(/^url\(['"]?([^"')]+)['"]?\)$/)[1],this.useImgTag=!1}this.image&&(this.imageElement=this.image.cloneNode(!0),this.useImgTag=!0,p(this.image,{position:"relative",display:"block",maxWidth:"100%",height:"auto",opacity:0,zIndex:-100}));var h={position:"absolute",top:0,left:0,width:"100%",height:"100%",overflow:"hidden",pointerEvents:"none",clipPath:"inset(0px)"},c={position:"scroll"===this.options.type?"absolute":"fixed"};"static"===g(this.container,"position")&&p(this.container,{position:"relative"}),"auto"===g(this.container,"z-index")&&p(this.container,{zIndex:0}),this.$container=this.stage.document.createElement("div"),p(this.$container,function(e){for(var t=1;t<arguments.length;t++){var i=null!=arguments[t]?arguments[t]:{};t%2?m(i,!0).forEach(function(t){f()(e,t,i[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):m(i).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(i,t))})}return e}({},h,{zIndex:-100})),this.$container.setAttribute("id","parallax-container-".concat(this.instanceID)),this.container.shadowRoot?this.container.shadowRoot.appendChild(this.$container):this.container.appendChild(this.$container),this.useImgTag?(c=Object.assign({"object-fit":"cover","object-position":"50% 50%","font-family":"object-fit: cover; object-position: 50% 50%;","max-width":"none"},h,c),this.imageElement.onload=function(){i.stage.update()}):(this.imageElement=this.stage.document.createElement("div"),c=Object.assign({"background-position":"50% 50%","background-size":"cover","background-repeat":"no-repeat","background-image":'url("'.concat(this.src,'")')},h,c)),p(this.imageElement,c),this.$container.appendChild(this.imageElement),this.coverImage(),this.onScroll(!0),"none"!==g(this.container,"background-image")&&p(this.container,{"background-image":"none"})}return o()(u,[{key:"update",value:function(t){var e=0<arguments.length&&void 0!==t?t:{};if(Object.assign(this.options,e),this.useImgTag)this.image.src!==this.imageElement.src&&(this.imageElement.src=this.image.src);else{this.container.style.backgroundImage=null;var i=g(this.container,"background-image");this.container.style.backgroundImage="none",this.imageElement.style.backgroundImage!==i&&(this.imageElement.style.backgroundImage=i)}this.stage.update()}},{key:"coverImage",value:function(){var t=this.$container.getBoundingClientRect(),e=this.options.speed,i="scroll"===this.options.type,n=0,a=t.height;i&&(n=e<0?e*Math.max(t.height,this.stage.height):e*(t.height+this.stage.height),1<e?a=Math.abs(n-this.stage.height):e<0?a=n/e+Math.abs(n):a+=Math.abs(this.stage.height-t.height)*(1-e),n/=2),this.parallaxScrollDistance=n;var o=i?(this.stage.height-a)/2:(t.height-a)/2;p(this.imageElement,{height:"".concat(a,"px"),marginTop:"".concat(o,"px"),left:"0",width:"".concat(t.width,"px")})}},{key:"isVisible",value:function(){return this.isElementInViewport||!1}},{key:"onScroll",value:function(t){var e=this.container.getBoundingClientRect(),i={};if(this.isElementInViewport=0<=e.bottom&&0<=e.right&&e.top<=this.stage.height&&e.left<=this.stage.width,t||this.isElementInViewport){var n=1-2*(this.stage.height-e.top)/(this.stage.height+e.height);if("scroll"===this.options.type){var a=this.parallaxScrollDistance*n;a-=e.top,i.transform="translate3d(0,".concat(a,"px,0)")}p(this.imageElement,i)}}},{key:"onResize",value:function(){this.coverImage()}},{key:"destroy",value:function(){this.container.style.zIndex=null,this.useImgTag?(p(this.image,{position:null,display:null,maxWidth:null,height:null,zIndex:null,opacity:null}),this.imageElement.removeAttribute("style"),this.container.replaceWith(this.image)):p(this.container,{backgroundImage:this.imageElement.style.backgroundImage}),this.$clipStyles&&this.$clipStyles.parentNode&&this.$clipStyles.parentNode.removeChild(this.$clipStyles),this.$container&&this.$container.parentNode&&this.$container.parentNode.removeChild(this.$container)}}]),u}(),u=function(){function i(t){var e=this;d()(this,i),this.window=t,this.document=t.document,this.instanceID=0,this.parallaxList=[],this.width=null,this.height=null,this.scrollTop=null,this.forceResizeParallax=!1,this.oldPageData=!1,this.window.addEventListener("resize",function(){e.calculateLayout()}),this.window.addEventListener("orientationchange",function(){e.calculateLayout()})}return o()(i,[{key:"nextInstanceID",value:function(){return this.instanceID+=1,this.instanceID}},{key:"get",value:function(e){return this.parallaxList.find(function(t){return t.element===e})}},{key:"contains",value:function(t){return null!=this.get(t)}},{key:"add",value:function(t,e){var i=1<arguments.length&&void 0!==e?e:{};if(this.contains(t))return null;var n=new c(this,t,i);return this.addToParallaxList(n),this.update(),n}},{key:"force",value:function(t,e){var i=1<arguments.length&&void 0!==e?e:{};this.contains(t)?this.update(t,i):this.add(t,i)}},{key:"remove",value:function(t){var e=this.get(t);e&&(this.removeFromParallaxList(e),e.destroy())}},{key:"update",value:function(t,e){var i=0<arguments.length&&void 0!==t?t:null,n=1<arguments.length&&void 0!==e?e:{};this.calculateLayout(),this.forceResizeParallax=!0,i&&this.contains(i)&&this.get(i).update(n)}},{key:"addToParallaxList",value:function(t){this.parallaxList.push(t),1===this.parallaxList.length&&this.updateParallax()}},{key:"removeFromParallaxList",value:function(i){var n=this;this.parallaxList.forEach(function(t,e){t.instanceID===i.instanceID&&n.parallaxList.splice(e,1)})}},{key:"destroy",value:function(){for(var t=this.parallaxList.length-1;0<=t;t-=1)this.parallaxList[t].destroy()}},{key:"updateParallax",value:function(){if(this.parallaxList.length){void 0!==this.window.pageYOffset?this.scrollTop=this.window.pageYOffset:this.scrollTop=(this.document.documentElement||this.document.body.parentNode||this.document.body).scrollTop;var e=this.forceResizeParallax||!this.oldPageData||this.oldPageData.width!==this.width||this.oldPageData.height!==this.height,i=e||!this.oldPageData||this.oldPageData.scrollTop!==this.scrollTop;this.forceResizeParallax=!1,(e||i)&&(this.parallaxList.forEach(function(t){e&&t.onResize(),i&&t.onScroll()}),this.oldPageData={width:this.width,height:this.height,scrollTop:this.scrollTop}),l(this.updateParallax.bind(this))}}},{key:"calculateLayout",value:function(){this.width=this.window.innerWidth||this.window.document.documentElement.clientWidth,this.height=this.window.innerHeight||this.window.document.documentElement.clientHeight}}]),i}();i.d(e,"Stage",function(){return u}),i.d(e,"Parallax",function(){return c});e.default=function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:window;return new u(t)}}],a.c=n,a.d=function(t,e,i){a.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},a.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},a.t=function(e,t){if(1&t&&(e=a(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var i=Object.create(null);if(a.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)a.d(i,n,function(t){return e[t]}.bind(null,n));return i},a.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return a.d(e,"a",e),e},a.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},a.p="",a(a.s=7)).default;function a(t){if(n[t])return n[t].exports;var e=n[t]={i:t,l:!1,exports:{}};return i[t].call(e.exports,e,e.exports,a),e.l=!0,e.exports}var i,n});
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.easyParallax=e():t.easyParallax=e()}(window,function(){return(n={},a.m=i=[function(t,e){t.exports=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}},function(t,e){function n(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}t.exports=function(t,e,i){return e&&n(t.prototype,e),i&&n(t,i),t}},function(t,e,i){var n=i(4),a=i(5),o=i(6);t.exports=function(t,e){return n(t)||a(t,e)||o()}},function(t,e){t.exports=function(t,e,i){return e in t?Object.defineProperty(t,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[e]=i,t}},function(t,e){t.exports=function(t){if(Array.isArray(t))return t}},function(t,e){t.exports=function(t,e){var i=[],n=!0,a=!1,o=void 0;try{for(var r,s=t[Symbol.iterator]();!(n=(r=s.next()).done)&&(i.push(r.value),!e||i.length!==e);n=!0);}catch(t){a=!0,o=t}finally{try{n||null==s.return||s.return()}finally{if(a)throw o}}return i}},function(t,e){t.exports=function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}},function(t,e,i){"use strict";i.r(e);var n=i(0),d=i.n(n),a=i(1),o=i.n(a),r=i(2),s=i.n(r),l=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(t){setTimeout(t,1e3/60)};function g(t,e){return t.ownerDocument.defaultView.getComputedStyle(t).getPropertyValue(e)}function p(t,e){for(var i=0,n=Object.entries(e);i<n.length;i++){var a=s()(n[i],2),o=a[0],r=a[1];t.style[o]=r}}var h=i(3),f=i.n(h);function m(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),i.push.apply(i,n)}return i}var c=function(){function u(t,e){var i=this,n=2<arguments.length&&void 0!==arguments[2]?arguments[2]:{},a=n.speed,o=void 0===a?.6:a,r=n.type,s=void 0===r?"scroll":r;if(d()(this,u),this.stage=t,this.element=e,this.options={type:s,speed:o},this.instanceID=this.stage.nextInstanceID(),"IMG"===e.tagName){if(this.container=t.document.createElement("div"),e.parentElement)e.parentElement.insertBefore(this.container,e);else e.getRootNode().insertBefore(this.container,e);this.container.appendChild(e),this.image=e,this.useImgTag=!0}else if(g(e,"background-image")){var l=g(this.container=e,"background-image");this.src=l.match(/^url\(['"]?([^"')]+)['"]?\)$/)[1],this.useImgTag=!1}this.image&&(this.imageElement=this.image.cloneNode(!0),this.useImgTag=!0,p(this.image,{position:"relative",display:"block",maxWidth:"100%",height:"auto",opacity:0,zIndex:-100}));var h={position:"absolute",top:0,left:0,width:"100%",height:"100%",overflow:"hidden",pointerEvents:"none",clipPath:"inset(0px)"},c={position:"absolute"};"static"===this.options.type&&(c.position="fixed",c.left="0px",c.top="0px",c.width="100%",c.height="100%"),"static"===g(this.container,"position")&&p(this.container,{position:"relative"}),"auto"===g(this.container,"z-index")&&p(this.container,{zIndex:0}),this.$container=this.stage.document.createElement("div"),p(this.$container,function(e){for(var t=1;t<arguments.length;t++){var i=null!=arguments[t]?arguments[t]:{};t%2?m(i,!0).forEach(function(t){f()(e,t,i[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):m(i).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(i,t))})}return e}({},h,{zIndex:-100})),this.$container.setAttribute("id","parallax-container-".concat(this.instanceID)),this.container.shadowRoot?this.container.shadowRoot.appendChild(this.$container):this.container.appendChild(this.$container),this.useImgTag?(c=Object.assign({"object-fit":"cover","object-position":"50% 50%","font-family":"object-fit: cover; object-position: 50% 50%;","max-width":"none"},h,c),this.imageElement.onload=function(){i.stage.update()}):(this.imageElement=this.stage.document.createElement("div"),c=Object.assign({"background-position":"50% 50%","background-size":"cover","background-repeat":"no-repeat","background-image":'url("'.concat(this.src,'")')},h,c)),p(this.imageElement,c),this.$container.appendChild(this.imageElement),this.coverImage(),this.onScroll(!0),"none"!==g(this.container,"background-image")&&p(this.container,{"background-image":"none"})}return o()(u,[{key:"update",value:function(t){var e=0<arguments.length&&void 0!==t?t:{};if(Object.assign(this.options,e),this.useImgTag)this.image.src!==this.imageElement.src&&(this.imageElement.src=this.image.src);else{this.container.style.backgroundImage=null;var i=g(this.container,"background-image");this.container.style.backgroundImage="none",this.imageElement.style.backgroundImage!==i&&(this.imageElement.style.backgroundImage=i)}this.stage.update()}},{key:"coverImage",value:function(){var t=this.$container.getBoundingClientRect(),e=this.options.speed,i="scroll"===this.options.type,n=0,a=t.height;i&&(n=e<0?e*Math.max(t.height,this.stage.height):e*(t.height+this.stage.height),1<e?a=Math.abs(n-this.stage.height):e<0?a=n/e+Math.abs(n):a+=Math.abs(this.stage.height-t.height)*(1-e),n/=2),this.parallaxScrollDistance=n;var o=i?(this.stage.height-a)/2:(t.height-a)/2;"scroll"===this.options.type?p(this.imageElement,{marginTop:"".concat(o,"px"),left:"0",height:"".concat(a,"px"),width:"".concat(t.width,"px")}):p(this.imageElement,{marginTop:"0",left:"0",top:"0",height:"100%",width:"100%"})}},{key:"isVisible",value:function(){return this.isElementInViewport||!1}},{key:"onScroll",value:function(t){var e=this.container.getBoundingClientRect(),i={};if(this.isElementInViewport=0<=e.bottom&&0<=e.right&&e.top<=this.stage.height&&e.left<=this.stage.width,t||this.isElementInViewport){var n=1-2*(this.stage.height-e.top)/(this.stage.height+e.height);if("scroll"===this.options.type){var a=this.parallaxScrollDistance*n;a-=e.top,i.transform="translate3d(0,".concat(a,"px,0)")}p(this.imageElement,i)}}},{key:"onResize",value:function(){this.coverImage()}},{key:"destroy",value:function(){this.container.style.zIndex=null,this.useImgTag?(p(this.image,{position:null,display:null,maxWidth:null,height:null,zIndex:null,opacity:null}),this.imageElement.removeAttribute("style"),this.container.replaceWith(this.image)):p(this.container,{backgroundImage:this.imageElement.style.backgroundImage}),this.$clipStyles&&this.$clipStyles.parentNode&&this.$clipStyles.parentNode.removeChild(this.$clipStyles),this.$container&&this.$container.parentNode&&this.$container.parentNode.removeChild(this.$container)}}]),u}(),u=function(){function i(t){var e=this;d()(this,i),this.window=t,this.document=t.document,this.instanceID=0,this.parallaxList=[],this.width=null,this.height=null,this.scrollTop=null,this.forceResizeParallax=!1,this.oldPageData=!1,this.window.addEventListener("resize",function(){e.calculateLayout()}),this.window.addEventListener("orientationchange",function(){e.calculateLayout()})}return o()(i,[{key:"nextInstanceID",value:function(){return this.instanceID+=1,this.instanceID}},{key:"get",value:function(e){return this.parallaxList.find(function(t){return t.element===e})}},{key:"contains",value:function(t){return null!=this.get(t)}},{key:"add",value:function(t,e){var i=1<arguments.length&&void 0!==e?e:{};if(this.contains(t))return null;var n=new c(this,t,i);return this.addToParallaxList(n),this.update(),n}},{key:"force",value:function(t,e){var i=1<arguments.length&&void 0!==e?e:{};this.contains(t)?this.update(t,i):this.add(t,i)}},{key:"remove",value:function(t){var e=this.get(t);e&&(this.removeFromParallaxList(e),e.destroy())}},{key:"update",value:function(t,e){var i=0<arguments.length&&void 0!==t?t:null,n=1<arguments.length&&void 0!==e?e:{};this.calculateLayout(),this.forceResizeParallax=!0,i&&this.contains(i)&&this.get(i).update(n)}},{key:"addToParallaxList",value:function(t){this.parallaxList.push(t),1===this.parallaxList.length&&this.updateParallax()}},{key:"removeFromParallaxList",value:function(i){var n=this;this.parallaxList.forEach(function(t,e){t.instanceID===i.instanceID&&n.parallaxList.splice(e,1)})}},{key:"destroy",value:function(){for(var t=this.parallaxList.length-1;0<=t;t-=1)this.parallaxList[t].destroy()}},{key:"updateParallax",value:function(){if(this.parallaxList.length){void 0!==this.window.pageYOffset?this.scrollTop=this.window.pageYOffset:this.scrollTop=(this.document.documentElement||this.document.body.parentNode||this.document.body).scrollTop;var e=this.forceResizeParallax||!this.oldPageData||this.oldPageData.width!==this.width||this.oldPageData.height!==this.height,i=e||!this.oldPageData||this.oldPageData.scrollTop!==this.scrollTop;this.forceResizeParallax=!1,(e||i)&&(this.parallaxList.forEach(function(t){e&&t.onResize(),i&&t.onScroll()}),this.oldPageData={width:this.width,height:this.height,scrollTop:this.scrollTop}),l(this.updateParallax.bind(this))}}},{key:"calculateLayout",value:function(){this.width=this.window.innerWidth||this.window.document.documentElement.clientWidth,this.height=this.window.innerHeight||this.window.document.documentElement.clientHeight}}]),i}();i.d(e,"Stage",function(){return u}),i.d(e,"Parallax",function(){return c});e.default=function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:window;return new u(t)}}],a.c=n,a.d=function(t,e,i){a.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},a.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},a.t=function(e,t){if(1&t&&(e=a(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var i=Object.create(null);if(a.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)a.d(i,n,function(t){return e[t]}.bind(null,n));return i},a.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return a.d(e,"a",e),e},a.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},a.p="",a(a.s=7)).default;function a(t){if(n[t])return n[t].exports;var e=n[t]={i:t,l:!1,exports:{}};return i[t].call(e.exports,e,e.exports,a),e.l=!0,e.exports}var i,n});

package.json

 {
   "name": "easy-parallax",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "main": "dist/easy-parallax.js",
@@ -5,0 +5,0 @@ "author": "Tobias Strebitzer <[e-mail]>",

src/Parallax.js

@@ -47,4 +47,9 @@ import { getStyle, setStyles } from './util'
     }
-    let imageStyles = {
-      position: this.options.type === 'scroll' ? 'absolute' : 'fixed'
+    let imageStyles = { position: 'absolute' }
+    if (this.options.type === 'static') {
+      imageStyles.position = 'fixed'
+      imageStyles.left = '0px'
+      imageStyles.top = '0px'
+      imageStyles.width = '100%'
+      imageStyles.height = '100%'
     }
@@ -158,8 +163,18 @@
     // apply result to item
-    setStyles(this.imageElement, {
-      height: `${resultH}px`,
-      marginTop: `${resultMT}px`,
-      left: '0',
-      width: `${rect.width}px`
-    })
+    if (this.options.type === 'scroll') {
+      setStyles(this.imageElement, {
+        marginTop: `${resultMT}px`,
+        left: '0',
+        height: `${resultH}px`,
+        width: `${rect.width}px`
+      })
+    } else {
+      setStyles(this.imageElement, {
+        marginTop: '0',
+        left: '0',
+        top: '0',
+        height: '100%',
+        width: '100%'
+      })
+    }
   }
@@ -166,0 +181,0 @@

No alert changes

Improved metrics

Total package byte prevSize

23002

2.52%

Lines of code

324

4.85%

No dependency changes