218339 2020-10-29 07:47:36 -0700 HTML template element does not respect input type="color" 2020-10-30 00:42:18 -0700 1 1 1 Unclassified WebKit DOM Safari 14 Mac macOS 10.15 RESOLVED DUPLICATE 216985 P2 Normal --- 1 cafebab3 webkit-unassigned akeerthi rniwa oldest_to_newest 1702722 0 412647 cafebab3 2020-10-29 07:47:36 -0700 Created attachment 412647 Minimal sample html page to reproduce the bug. ### Overview The HTML Content Template element `<template>` does not respect the HTML5 input type="color". Instead of rendering a color picker, an ordinary input field is shown. ### Steps to Reproduce Open the attached html file in a Safari browser. ### Actual Results An input text field is rendered. ### Expected Results A color picker should be rendered. ### Additional Builds and Platforms Doesn't occur on current version of Chrome and Firefox. ### Additional Information Above, we reproduced the bug using a template tag as part of the markup of a html document. The bug also occurs, when create a template element dynamically using javascript: const template = document.createElement('template') template.innerHTML = '<input type="color">' const fragment = template.content document.body.appendChild(fragment.cloneNode(true)) The bug does not occur when rendering to a div. The following code can be used as a **workaround** for the bug: const div = document.createElement('div') div.innerHTML = '<input type="color">' const fragment = document.createDocumentFragment() fragment.append(...div.childNodes) document.body.appendChild(fragment.cloneNode(true)) Here you can find a benchmark that compares the workaround with the canonical solution: https://esbench.com/bench/5f9ac111b4632100a7dcd4e0 Thanks! Daniel 1702925 1 akeerthi 2020-10-29 17:27:13 -0700 This is a duplicate of https://bugs.webkit.org/show_bug.cgi?id=216985. It's fixed in Safari Technology Preview 116. *** This bug has been marked as a duplicate of bug 216985 *** 1702992 2 cafebab3 2020-10-30 00:42:18 -0700 Awesome, thanks for the fast reply! 412647 2020-10-29 07:47:36 -0700 2020-10-29 07:47:36 -0700 Minimal sample html page to reproduce the bug. safari-template-bug.html text/html 510 cafebab3 PCFET0NUWVBFIGh0bWw+CjxodG1sPgogICA8aGVhZD4KICAgICAgPHRpdGxlPkhUTUwgdGVtcGxh dGUgYnVnPC90aXRsZT4KICAgPC9oZWFkPgogICA8Ym9keT4KICAgICAgPHRlbXBsYXRlIGlkPSJ0 ZW1wbGF0ZSI+CiAgICAgICAgIDxpbnB1dCB0eXBlPSJjb2xvciI+CiAgICAgIDwvdGVtcGxhdGU+ CiAgICAgIDxkaXYgaWQ9ImFwcCI+CiAgICAgIDwvZGl2PgogICAgICA8c2NyaXB0PgogICAgICAg ICB3aW5kb3cub25sb2FkID0gKCkgPT4gewogICAgICAgICAgICBjb25zdCB0ZW1wbGF0ZSA9IGRv Y3VtZW50LmdldEVsZW1lbnRCeUlkKCd0ZW1wbGF0ZScpCiAgICAgICAgICAgIGNvbnN0IGFwcCA9 IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdhcHAnKQogICAgICAgICAgICBhcHAuYXBwZW5kQ2hp bGQodGVtcGxhdGUuY29udGVudCkgLy8gc2ltcGxpZmllZCwgd2l0aG91dCB1c2luZyBjbG9uZU5v ZGUodHJ1ZSkKICAgICAgICAgfQogICAgICA8L3NjcmlwdD4KICAgPC9ib2R5Pgo8L2h0bWw+