Bug 149806 – <input> of type=checkbox/radio duplicates in DOM when inside a position:fixed; <div>

• Component: Forms
• Status: RESOLVED REMIND

[Zach]

On Safari when using a Webkit View.

If an <input type="checkbox"> or <input type="radio"> is placed inside a <div style="position:fixed;"> then the input will be duplicated outside the div on the body element of the DOM whenever that input is clicked.

I've created an example jsfiddle here http://jsfiddle.net/cy8npxby/ that has the position:fixed; div with a checkbox input inside.

[Alexey Proskuryakov]

> I've created an example jsfiddle here http://jsfiddle.net/cy8npxby/ that has the position:fixed; div with a checkbox input inside.

Could you please clarify what are expected and actual results for this test? How can one tell that the test is failing?

[Zach]

(In reply to comment #1)
> > I've created an example jsfiddle here http://jsfiddle.net/cy8npxby/ that has the position:fixed; div with a checkbox input inside.
> 
> Could you please clarify what are expected and actual results for this test?
> How can one tell that the test is failing?

The actual result (inside a webkit view) is that the input radio or checkbox is duplicate in the DOM when clicked.

The expected results are that the input checkbox or radio button does not duplicate when clicked. 

The example I've provided in jsfiddle is only showing how the <div> should be set up inside a webkit view for the defect to be reproducible. The defect is NOT reproducible inside the jsfiddle I've provided, it IS reproducible inside a webkit view.

[Alexey Proskuryakov]

> The actual result (inside a webkit view) is that the input radio or checkbox is duplicate in the DOM when clicked.

Could you please clarify how you see the DOM? It's almost certain that there is a miscommunication here. Can you attach a screenshot, and point out what exactly is wrong there?

> The defect is NOT reproducible inside the jsfiddle I've provided, it IS reproducible inside a webkit view.

The behavior on this test case appears correct to me in a WebKit1 WebView (opening the test case in MiniBrowser on Mac).

[Zach]

Created attachment 262518 [details]
Duplicate input video

[Zach]

I've attached a video of the defect occurring. The radio buttons are inside a position:fixed; modal. (This would also happen inside a position:fixed; <div>)

[Alexey Proskuryakov]

Thank you for the video. It's a video of some app though, what happens when reproducing with your test case? Can you provide a complete test case with an Objective-C project?

[Zach]

Created attachment 262770 [details]
Objective C project

I have attached an objective-c project containing a 10.11 WebKit webview that duplicates the issue. The webview is pointed to the jsfiddle previously mentioned.

[Alexey Proskuryakov]

Thank you, I could finally reproduce after trying multiple OS versions:
- doesn't reproduce on OS X 10.9.5;
- doesn't reproduce on OS X 10.9.5 with trunk WebKit;
- reproduces on OS X 10.10.5;
- doesn't reproduce on OS X 10.11;

Given that, this looks like a bug that was introduced with OS X 10.10 and fixed in Safari's updated WebKit, but that was never fixed in the system framework.

I CC'ed some people who may be able to suggest a workaround.

[Zach]

Thank you for your help. Please let me know if there is a workaround for this issue.

[Zach]

Is there any known workaround for this bug?