diff --git a/bower.json b/bower.json index c4a0e27..6710952 100644 --- a/bower.json +++ b/bower.json @@ -20,5 +20,5 @@ "test", "tests" ], - "version": "2.0.5" + "version": "2.1.0" } diff --git a/dist/objectFitPolyfill.basic.min.js b/dist/objectFitPolyfill.basic.min.js index befb6ad..0136061 100644 --- a/dist/objectFitPolyfill.basic.min.js +++ b/dist/objectFitPolyfill.basic.min.js @@ -1 +1 @@ -!function(){"use strict";if("undefined"!=typeof window){if("objectFit"in document.documentElement.style!=!1)return void(window.objectFitPolyfill=function(){return!1});var t=function(t){var e=window.getComputedStyle(t,null),i=e.getPropertyValue("position"),o=e.getPropertyValue("overflow"),n=e.getPropertyValue("display");i&&"static"!==i||(t.style.position="relative"),"hidden"!==o&&(t.style.overflow="hidden"),n&&"inline"!==n||(t.style.display="block"),0===t.clientHeight&&(t.style.height="100%"),-1===t.className.indexOf("object-fit-polyfill")&&(t.className=t.className+" object-fit-polyfill")},e=function(t){var e=window.getComputedStyle(t,null),i={"max-width":"none","max-height":"none","min-width":"0px","min-height":"0px",top:"auto",right:"auto",bottom:"auto",left:"auto","margin-top":"0px","margin-right":"0px","margin-bottom":"0px","margin-left":"0px"};for(var o in i){e.getPropertyValue(o)!==i[o]&&(t.style[o]=i[o])}},i=function(i){var o=i.parentNode;t(o),e(i),i.style.position="absolute",i.style.height="100%",i.style.width="auto",i.clientWidth>o.clientWidth?(i.style.top="0",i.style.marginTop="0",i.style.left="50%",i.style.marginLeft=i.clientWidth/-2+"px"):(i.style.width="100%",i.style.height="auto",i.style.left="0",i.style.marginLeft="0",i.style.top="50%",i.style.marginTop=i.clientHeight/-2+"px")},o=function(t){if(void 0===t)t=document.querySelectorAll("[data-object-fit]");else if(t&&t.nodeName)t=[t];else{if("object"!=typeof t||!t.length||!t[0].nodeName)return!1;t=t}for(var e=0;e0?i(t[e]):t[e].addEventListener("loadedmetadata",function(){i(this)}))}return!0};document.addEventListener("DOMContentLoaded",function(){o()}),window.addEventListener("resize",function(){o()}),window.objectFitPolyfill=o}}(); \ No newline at end of file +!function(){"use strict";if("undefined"!=typeof window){var t=-1!==window.navigator.userAgent.indexOf("Edge/16.");if("objectFit"in document.documentElement.style!=!1&&!t)return void(window.objectFitPolyfill=function(){return!1});var e=function(t){var e=window.getComputedStyle(t,null),i=e.getPropertyValue("position"),n=e.getPropertyValue("overflow"),o=e.getPropertyValue("display");i&&"static"!==i||(t.style.position="relative"),"hidden"!==n&&(t.style.overflow="hidden"),o&&"inline"!==o||(t.style.display="block"),0===t.clientHeight&&(t.style.height="100%"),-1===t.className.indexOf("object-fit-polyfill")&&(t.className=t.className+" object-fit-polyfill")},i=function(t){var e=window.getComputedStyle(t,null),i={"max-width":"none","max-height":"none","min-width":"0px","min-height":"0px",top:"auto",right:"auto",bottom:"auto",left:"auto","margin-top":"0px","margin-right":"0px","margin-bottom":"0px","margin-left":"0px"};for(var n in i){e.getPropertyValue(n)!==i[n]&&(t.style[n]=i[n])}},n=function(t){var n=t.parentNode;e(n),i(t),t.style.position="absolute",t.style.height="100%",t.style.width="auto",t.clientWidth>n.clientWidth?(t.style.top="0",t.style.marginTop="0",t.style.left="50%",t.style.marginLeft=t.clientWidth/-2+"px"):(t.style.width="100%",t.style.height="auto",t.style.left="0",t.style.marginLeft="0",t.style.top="50%",t.style.marginTop=t.clientHeight/-2+"px")},o=function(e){if(void 0===e)e=document.querySelectorAll("[data-object-fit]");else if(e&&e.nodeName)e=[e];else{if("object"!=typeof e||!e.length||!e[0].nodeName)return!1;e=e}for(var i=0;i0?n(e[i]):e[i].addEventListener("loadedmetadata",function(){n(this)})):e[i].complete?n(e[i]):e[i].addEventListener("load",function(){n(this)})}return!0};document.addEventListener("DOMContentLoaded",function(){o()}),window.addEventListener("resize",function(){o()}),window.objectFitPolyfill=o}}(); \ No newline at end of file diff --git a/dist/objectFitPolyfill.min.js b/dist/objectFitPolyfill.min.js index d7c8d8f..fa5aff1 100644 --- a/dist/objectFitPolyfill.min.js +++ b/dist/objectFitPolyfill.min.js @@ -1 +1 @@ -!function(){"use strict";if("undefined"!=typeof window){if("objectFit"in document.documentElement.style!=!1)return void(window.objectFitPolyfill=function(){return!1});var t=function(t){var e=window.getComputedStyle(t,null),i=e.getPropertyValue("position"),o=e.getPropertyValue("overflow"),n=e.getPropertyValue("display");i&&"static"!==i||(t.style.position="relative"),"hidden"!==o&&(t.style.overflow="hidden"),n&&"inline"!==n||(t.style.display="block"),0===t.clientHeight&&(t.style.height="100%"),-1===t.className.indexOf("object-fit-polyfill")&&(t.className=t.className+" object-fit-polyfill")},e=function(t){var e=window.getComputedStyle(t,null),i={"max-width":"none","max-height":"none","min-width":"0px","min-height":"0px",top:"auto",right:"auto",bottom:"auto",left:"auto","margin-top":"0px","margin-right":"0px","margin-bottom":"0px","margin-left":"0px"};for(var o in i){e.getPropertyValue(o)!==i[o]&&(t.style[o]=i[o])}},i=function(t,e,i){var o,n,l,a,d;if(i=i.split(" "),i.length<2&&(i[1]=i[0]),"x"===t)o=i[0],n=i[1],l="left",a="right",d=e.clientWidth;else{if("y"!==t)return;o=i[1],n=i[0],l="top",a="bottom",d=e.clientHeight}return o===l||n===l?void(e.style[l]="0"):o===a||n===a?void(e.style[a]="0"):"center"===o||"50%"===o?(e.style[l]="50%",void(e.style["margin-"+l]=d/-2+"px")):o.indexOf("%")>=0?(o=parseInt(o),void(o<50?(e.style[l]=o+"%",e.style["margin-"+l]=d*(o/-100)+"px"):(o=100-o,e.style[a]=o+"%",e.style["margin-"+a]=d*(o/-100)+"px"))):void(e.style[l]=o)},o=function(o){var n=o.dataset?o.dataset.objectFit:o.getAttribute("data-object-fit"),l=o.dataset?o.dataset.objectPosition:o.getAttribute("data-object-position");n=n||"cover",l=l||"50% 50%";var a=o.parentNode;t(a),e(o),o.style.position="absolute",o.style.height="100%",o.style.width="auto","scale-down"===n&&(o.style.height="auto",o.clientWidtha.clientWidth||"contain"===n&&o.clientWidth0?o(t[e]):t[e].addEventListener("loadedmetadata",function(){o(this)}))}return!0};document.addEventListener("DOMContentLoaded",function(){n()}),window.addEventListener("resize",function(){n()}),window.objectFitPolyfill=n}}(); \ No newline at end of file +!function(){"use strict";if("undefined"!=typeof window){var t=-1!==window.navigator.userAgent.indexOf("Edge/16.");if("objectFit"in document.documentElement.style!=!1&&!t)return void(window.objectFitPolyfill=function(){return!1});var e=function(t){var e=window.getComputedStyle(t,null),i=e.getPropertyValue("position"),n=e.getPropertyValue("overflow"),o=e.getPropertyValue("display");i&&"static"!==i||(t.style.position="relative"),"hidden"!==n&&(t.style.overflow="hidden"),o&&"inline"!==o||(t.style.display="block"),0===t.clientHeight&&(t.style.height="100%"),-1===t.className.indexOf("object-fit-polyfill")&&(t.className=t.className+" object-fit-polyfill")},i=function(t){var e=window.getComputedStyle(t,null),i={"max-width":"none","max-height":"none","min-width":"0px","min-height":"0px",top:"auto",right:"auto",bottom:"auto",left:"auto","margin-top":"0px","margin-right":"0px","margin-bottom":"0px","margin-left":"0px"};for(var n in i){e.getPropertyValue(n)!==i[n]&&(t.style[n]=i[n])}},n=function(t,e,i){var n,o,l,a,d;if(i=i.split(" "),i.length<2&&(i[1]=i[0]),"x"===t)n=i[0],o=i[1],l="left",a="right",d=e.clientWidth;else{if("y"!==t)return;n=i[1],o=i[0],l="top",a="bottom",d=e.clientHeight}return n===l||o===l?void(e.style[l]="0"):n===a||o===a?void(e.style[a]="0"):"center"===n||"50%"===n?(e.style[l]="50%",void(e.style["margin-"+l]=d/-2+"px")):n.indexOf("%")>=0?(n=parseInt(n),void(n<50?(e.style[l]=n+"%",e.style["margin-"+l]=d*(n/-100)+"px"):(n=100-n,e.style[a]=n+"%",e.style["margin-"+a]=d*(n/-100)+"px"))):void(e.style[l]=n)},o=function(t){var o=t.dataset?t.dataset.objectFit:t.getAttribute("data-object-fit"),l=t.dataset?t.dataset.objectPosition:t.getAttribute("data-object-position");o=o||"cover",l=l||"50% 50%";var a=t.parentNode;e(a),i(t),t.style.position="absolute",t.style.height="100%",t.style.width="auto","scale-down"===o&&(t.style.height="auto",t.clientWidtha.clientWidth||"contain"===o&&t.clientWidth0?o(e[i]):e[i].addEventListener("loadedmetadata",function(){o(this)})):e[i].complete?o(e[i]):e[i].addEventListener("load",function(){o(this)})}return!0};document.addEventListener("DOMContentLoaded",function(){l()}),window.addEventListener("resize",function(){l()}),window.objectFitPolyfill=l}}(); \ No newline at end of file diff --git a/package.json b/package.json index c7abcd5..cde7598 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "objectFitPolyfill", - "version": "2.0.5", + "version": "2.1.0", "description": "A Javascript polyfill for browsers that don't support the object-fit CSS property", "main": "dist/objectFitPolyfill.min.js", "keywords": [ diff --git a/src/objectFitPolyfill.basic.js b/src/objectFitPolyfill.basic.js index 3411fd0..4ab80d7 100644 --- a/src/objectFitPolyfill.basic.js +++ b/src/objectFitPolyfill.basic.js @@ -18,8 +18,11 @@ return; } + // Workaround for Edge 16, which only implemented object-fit for tags + var isEdge16 = ( window.navigator.userAgent.indexOf("Edge/16.") !== -1 ); + // If the browser does support object-fit, we don't need to continue - if ("objectFit" in document.documentElement.style !== false) { + if ("objectFit" in document.documentElement.style !== false && !isEdge16) { window.objectFitPolyfill = function() { return false }; return; } @@ -149,7 +152,7 @@ if (!media[i].nodeName) { continue; } var mediaType = media[i].nodeName.toLowerCase(); - if (mediaType === "img") { + if (mediaType === "img" && !isEdge16) { if (media[i].complete) { objectFit(media[i]); } diff --git a/src/objectFitPolyfill.js b/src/objectFitPolyfill.js index f088883..8fae2bb 100644 --- a/src/objectFitPolyfill.js +++ b/src/objectFitPolyfill.js @@ -15,8 +15,11 @@ return; } + // Workaround for Edge 16, which only implemented object-fit for tags + var isEdge16 = ( window.navigator.userAgent.indexOf("Edge/16.") !== -1 ); + // If the browser does support object-fit, we don't need to continue - if ("objectFit" in document.documentElement.style !== false) { + if ("objectFit" in document.documentElement.style !== false && !isEdge16) { window.objectFitPolyfill = function() { return false }; return; } @@ -246,7 +249,7 @@ var mediaType = media[i].nodeName.toLowerCase(); - if (mediaType === "img") { + if (mediaType === "img" && !isEdge16) { if (media[i].complete) { objectFit(media[i]); }