Skip to content
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

Closed
jprats89 opened this issue Nov 25, 2019 · 6 comments · May be fixed by #277
Closed

Picture tag not working in IE11 #215

jprats89 opened this issue Nov 25, 2019 · 6 comments · May be fixed by #277

Comments

@jprats89
Copy link

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!

@ApoorvSaxena
Copy link
Owner

Will be glad to merge PR with polyfill recommendation in README

@hinok
Copy link

hinok commented Mar 30, 2020

@ApoorvSaxena I'm just curious, what was your motivation to change .appendChild to .append, because it's newer API?

3ae5f9b#diff-0fc67cf1417ed1d78c12555dd5590d00R22

@mrkpatchaa
Copy link

I've tried with #221 and it's working now. I've also added polyfill for PictureElement
https://polyfill.io/v3/polyfill.min.js?features=HTMLPictureElement%2CIntersectionObserver
"lozad": "ApoorvSaxena/lozad.js#pull/221/head"

@abhinicky84
Copy link

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.

@hinok
Copy link

hinok commented Jun 23, 2020

@abhinicky84

You need to polyfill Element.append for older browsers

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) ||
    {},
);

@spaceninja
Copy link

spaceninja commented Nov 19, 2021

Can confirm that adding Element.prototype.append, Object.assign, & IntersectionObserver to our polyfill.io did the trick. The example polyfill.io URL in the readme should be updated to https://polyfill.io/v3/polyfill.min.js?features=Element.prototype.append%2CObject.assign%2CIntersectionObserver

spaceninja added a commit to spaceninja/lozad.js that referenced this issue Nov 19, 2021
This PR adds `Element.prototype.append` to the example polyfill.io URL in the readme for IE11 support.

Fixes ApoorvSaxena#215
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants