New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Picture tag not working in IE11 #215
Comments
Will be glad to merge PR with polyfill recommendation in README |
@ApoorvSaxena I'm just curious, what was your motivation to change |
I've tried with #221 and it's working now. I've also added polyfill for PictureElement |
Hi @ApoorvSaxena : Could you please confirm about the solution of this issue on IE11 ? I still dont see it working on the demo site on IE. Please advise on how to make it work. |
You need to polyfill polyfill-element-append.js if ('Element' in window && 'append' in Element.prototype) {
return;
}
/**
* Generated by URL and opened in IE11 / Edge < 17
* https://polyfill.io/v3/polyfill.min.js?features=DocumentFragment.prototype.append%2CElement.prototype.append
*/
/* eslint-disable */
/* Polyfill service v3.53.1
* For detailed credits and licence information see https://github.com/financial-times/polyfill-service.
*
* Features requested: DocumentFragment.prototype.append,Element.prototype.append
*
* - _mutation, License: CC0 (required by "DocumentFragment.prototype.append", "Element.prototype.append")
* - DocumentFragment.prototype.append, License: CC0
* - Element.prototype.append, License: CC0 */
(function (self, undefined) {
// _mutation
var _mutation = (function () {
// eslint-disable-line no-unused-vars
function isNode(object) {
// DOM, Level2
if (typeof Node === 'function') {
return object instanceof Node;
}
// Older browsers, check if it looks like a Node instance)
return (
object &&
typeof object === 'object' &&
object.nodeName &&
object.nodeType >= 1 &&
object.nodeType <= 12
);
}
// http://dom.spec.whatwg.org/#mutation-method-macro
return function mutation(nodes) {
if (nodes.length === 1) {
return isNode(nodes[0]) ? nodes[0] : document.createTextNode(nodes[0] + '');
}
var fragment = document.createDocumentFragment();
for (var i = 0; i < nodes.length; i++) {
fragment.appendChild(isNode(nodes[i]) ? nodes[i] : document.createTextNode(nodes[i] + ''));
}
return fragment;
};
})();
// DocumentFragment.prototype.append
/* global _mutation */
DocumentFragment.prototype.append = function append() {
this.appendChild(_mutation(arguments));
};
// Element.prototype.append
/* global _mutation */
Document.prototype.append = Element.prototype.append = function append() {
this.appendChild(_mutation(arguments));
};
})(
('object' === typeof window && window) ||
('object' === typeof self && self) ||
('object' === typeof global && global) ||
{},
); |
Can confirm that adding |
This PR adds `Element.prototype.append` to the example polyfill.io URL in the readme for IE11 support. Fixes ApoorvSaxena#215
Picture tags are not working in IE11.
Steps to Reproduce
If you go to demo site https://apoorv.pro/lozad.js/demo/ and scroll to the picture tag example you will see the next error by IE console:
SCRIPT438: Object doesn't support property or method 'append'
File: lozad.min.js, Line: 9, Column: 323
Possible Solution
I solved with the this pollyfill, but there may be better solutions
https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append#Polyfill
If you could include in the documentation the best solution for this and solve the problem in the example page it would be great, thank you!
The text was updated successfully, but these errors were encountered: