Many checkbox elements "slows" down Safari - html

Question

I am encountering an issue, in Safari. When I have many type="checkbox" elements on a page, interacting with with a text input becomes very slow and laggy.
This seems much more severe in Safari than Chrome/Firefox (on Mac).
I noticed the performance issue when doing some filtering on the massive list that contains checkboxes, but noticed that even if I remove my filtering code, the performance is still very poor.
Snippet #1
1600 type="checkbox" elements. Try interacting with the text input on Safari - Fiddle Here
function make() {
var num = 1600;
for( var i = 0; i < num; i++) {
var p = document.createElement("div");
var input = document.createElement("input");
input.type = "checkbox";
p.appendChild(input);
document.getElementById("container").appendChild(p);
}
}
make();
<input type="text">
<div id="container">
</div>
Snippet #2
1600 span elements; interacting with the text input is as smooth as usual in Safari - Fiddle Here
function make() {
var num = 1600;
for( var i = 0; i < num; i++) {
var p = document.createElement("div");
var input = document.createElement("input");
input.type = "checkbox";
p.appendChild(input);
document.getElementById("container").appendChild(p);
}
}
function make2() {
var num = 1600;
for( var i = 0; i < num; i++) {
var p = document.createElement("div");
var sp = document.createElement("span");
sp.innerHTML = Math.floor(Math.random() * 1600);
p.appendChild(sp);
document.getElementById("container").appendChild(p);
}
}
make2();
<input type="text">
<div id="container">
</div>
Is there anyway I can remedy this issue in Safari and get the performance closer to how Firefox and Chrome handle this?

Answer 1

Summary:
From my understanding of your question, your stating the webpage performance is lost when you use checkboxes over spans, and would like to know why this may be
Answer
You have an unusually high number of form checkboxes, whilst a browser can quite easily handle more form elements, it will ultimately depend on how much RAM you have available and installed on that terminal.
There is no official limit to the number of DOM elements you can have on a website, the only thing I can suggest is to use AJAX and pagination to break down the number of checkboxes you have on 1 page at any given time or upgrade your computer.
I have checked out the links you profiled to JSFiddle and did not have any issues with lag typing into the text box myself.
I dont feel this is an HTML question, but rather a memory / performance issue
Check to see how much memory you have, how much memory you have free and available and if there is an issue with your version of your browser that may be causing a memory lag. For instance Firefox has been notoriously known for causing memory issues when left running for a while.

Answer 2

The issue seems to lie with displaying the Safari checkbox. If the checkboxes exist in the dom but are hidden, by using display: none, the performance degradation is gone.
While I don't understand exactly why this is occuring, I can essentially resolve the issue by using custom checkbox element and applying the display: none property on the original.
Snippet - Fiddle Here
function make() {
var num = 1600;
for( var i = 0; i < num; i++) {
var p = document.createElement("div");
var input = document.createElement("input");
var l = document.createElement("label");
var c = "c-" + Math.floor(Math.random() * 1600);
input.type = "checkbox";
l.htmlFor = c;
input.id = c;
p.appendChild(input);
p.appendChild(l);
document.getElementById("container").appendChild(p);
}
}
function make2() {
var num = 1600;
for( var i = 0; i < num; i++) {
var p = document.createElement("div");
var sp = document.createElement("span");
sp.innerHTML = Math.floor(Math.random() * 1600);
p.appendChild(sp);
document.getElementById("container").appendChild(p);
}
}
make();
input[type=checkbox] {
display: none;
}
label {
cursor: pointer;
border: 1px solid #ccc;
border-radius: 50%;
display: block;
height: 12px;
width: 12px;
margin-bottom: 4px;
position: relative;
}
label:after {
background: red;
border-radius: 50%;
content: "";
position: absolute;
height: 8px;
width: 8px;
top: 2px;
left: 2px;
display: none;
}
input[type=checkbox]:checked + label {
border-color: red;
}
input[type=checkbox]:checked + label:after {
display: block;
}
<input type="text">
<div id="container">
</div>