Search code examples
javascripthtmlsafarimobile-safarimaterial-design-lite

Material Design lite dialog render in Safari desktop and phone

I have followed getmdl.io's example to implement a dialog component. It works fine in Chrome, Firefox and Android Web views; but in Safari, it renders dialog elements even if they are not invoked. I have put the example at the end of body element just before script elements.

enter image description here

Any thoughts are appreciated.

Solution

  • Material Design Lite uses the dialog-Element, which is not supported by all browsers. (See Browser-Compatibility)

    This is an experimental technology Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

    To make it work in other browsers, you have to include the dialog-polyfill. Also please note, that <dialog>-Elements should be located directly after the <body>-tag and not inside any other wrappers.

    See codesample copied from dialog-polyfill:

    <head>
  <script src="dialog-polyfill.js"></script>
  <link rel="stylesheet" type="text/css" href="dialog-polyfill.css" />
</head>
<body>
  <dialog>
    I'm a dialog!
    <form method="dialog">
      <input type="submit" value="Close" />
    </form>
  </dialog>
  <script>
    var dialog = document.querySelector('dialog');
    dialogPolyfill.registerDialog(dialog);
    // Now dialog acts like a native <dialog>.
    dialog.showModal();
  </script>
</body>

    Also the Dialog-Element will be removed from HTML 5.1, since chrome is the only browser that actually supports it natively. See https://github.com/w3c/html/issues/427