Safari on Mac responses slow when typing on a webpage with lots of <input type="text"> fields

Question

I'm recently working on a project and find a weird problem in Safari on Mac. When safari loads a web page with too many input text fields, it becomes slow when focusing and typing in these fields.

I made a simple php page to test. The code is listed below:

<?php

for ($i = 0; $i < 1000; $i++) {
    echo "<p>
            <input type='text' />
            <input type='text' />
            <input type='text' />
            <input type='text' />
            <input type='text' />
        </p>";
}
?>

Then open it in Safari 8.0 on Yosemite or Safari 7.0 on Mavericks, try to type something in some fields, you will find Safari responses very slow while typing.

But if opening this php page in Firefox or Chrome, they response typing very quick and at a normal speed.

I also try to use some editable div blocks to replace the input text fields, I found in Safari these editable div responses typing very fast and not like the input fields.

Is there anything special for Safari to responses typing in the input text fields?

Answer 1

For those that need the answer. The answer is to wrap your the troubled text input in a separate form wrapper.

Here is a use case that fixes it. (once again, this is an issue that is only applicable to safari, it appears to work fine both ways on chrome)

http://jsbin.com/hoxufu/1/edit?html,css,js,output