Material Design lite dialog render in Safari desktop and phone

1.6k Views Asked by Tala At 10 April 2025 at 17:02

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.

Any thoughts are appreciated.

Original Q&A

There are 1 best solutions below

Michael B On 27 December 2016 at 09:30 BEST ANSWER

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

Material Design lite dialog render in Safari desktop and phone

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in SAFARI

Related Questions in MOBILE-SAFARI

Related Questions in MATERIAL-DESIGN-LITE

Trending Questions

Popular # Hahtags

Popular Questions