Materialize 1.0.0 compatibilities

[ThomasMarques]

Current Behavior

In the README, you announce that Materialize is compatible with Firefox 31+.
It was the true for versions 0.100.2 and previous, but in 1.0.0-rc.1 you use the function insertAdjacentElement (for modal for example) which is only available only since the version 48 of Firefox :
https://developer.mozilla.org/fr/docs/Web/API/Element/insertAdjacentElement

To work around on my project, I developed a polyfill.
But I think it's interesting for you to know the problem.

Possible Solutions

• Modify the compatibilities announced,
• Integrate a polyfill of insertAdjacentElement,
• Or do not to use this function in your scripts in favor of a function available in Firefox 31 and more.

[davelavoie]

For those who have the same issues (and believe me, a lot of places are still using a version of Firefox older than 48), you have two choices:

1. Revert back to Materialize 0.100.2
2. Add the following JS code and make sure it runs before any modal is called. You just need to run it once.

if (typeof HTMLElement != "undefined" && typeof
	HTMLElement.prototype.insertAdjacentElement == "undefined" ) {
	HTMLElement.prototype.insertAdjacentElement = function(where, parsedNode) {
		switch (where) {
			case 'beforeBegin':
				this.parentNode.insertBefore(parsedNode, this)
				break;
			case 'afterBegin':
				this.insertBefore(parsedNode, this.firstChild);
				break;
			case 'beforeEnd':
				this.appendChild(parsedNode);
				break;
			case 'afterEnd':
				if (this.nextSibling)
					this.parentNode.insertBefore(parsedNode, this.nextSibling);
				else this.parentNode.appendChild(parsedNode);
				break;
		}
	}
}

or the following minified version of the same code:

"undefined"!=typeof HTMLElement&&void 0===HTMLElement.prototype.insertAdjacentElement&&(HTMLElement.prototype.insertAdjacentElement=function(e,t){switch(e){case"beforeBegin":this.parentNode.insertBefore(t,this);break;case"afterBegin":this.insertBefore(t,this.firstChild);break;case"beforeEnd":this.appendChild(t);break;case"afterEnd":this.nextSibling?this.parentNode.insertBefore(t,this.nextSibling):this.parentNode.appendChild(t)}});

What this code does is checking if insertAdjacentElement is supported by the browser. If it's not the case, it'll register a fallback function and it should fix the issue with the latest Materialize version.

Ideally, Materialize should either not use insertAdjacentElement, or if they still plan to support Firefox31+, the team should include that piece of code somewhere.

Thanks!

[davecarlson]

Has there been any progress on this landing as officially supported ?