Bug 218339 - HTML template element does not respect input type="color"
Summary: HTML template element does not respect input type="color"
Status: RESOLVED DUPLICATE of bug 216985
Alias: None
Product: WebKit
Classification: Unclassified
Component: DOM (show other bugs)
Version: Safari 14
Hardware: Mac macOS 10.15
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2020-10-29 07:47 PDT by Daniel Dietrich
Modified: 2020-10-30 00:42 PDT (History)
2 users (show)

See Also:


Attachments
Minimal sample html page to reproduce the bug. (510 bytes, text/html)
2020-10-29 07:47 PDT, Daniel Dietrich
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Daniel Dietrich 2020-10-29 07:47:36 PDT
Created attachment 412647 [details]
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
Comment 1 Aditya Keerthi 2020-10-29 17:27:13 PDT
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 ***
Comment 2 Daniel Dietrich 2020-10-30 00:42:18 PDT
Awesome, thanks for the fast reply!