Why is typing in a textarea in firefox causing the screen to scroll?

Question

I am experiencing an incredibly bizarre issue with the isotope plugin in Firefox only. I have a textarea in each of my isotope elements and when I scroll down to the bottom and type in one of the textareas, the screen jumps to the top. I have reproduced this in jsfiddle:

http://jsfiddle.net/galtschul/WfTZ5/

I have been looking at this for hours and cannot figure out what is causing this scroll even to fire. Would love some help!

Answer 1

So, the problem is not with isotope. The problem is that there's a bug in how firefox renders textareas after a scale3d and/or transform3d occurs. It winds up "thinking" that the textarea is at the top left, which is why it jumps to the top. Here's are two bugs that were filed on Mozilla's bugzilla:

November 2011: https://bugzilla.mozilla.org/show_bug.cgi?id=703241 July 2012: https://bugzilla.mozilla.org/show_bug.cgi?id=778761

Chrome also suffers from rendering issues after the same transforms are applied. Namely, rendering of the caret. I filed a new but on Webkit's bugzilla that was quickly confirmed by a Webkit developer.

Here's an example of the bug: http://jsfiddle.net/galtschul/StbKg/

Click in any of the editable boxes before clicking the button ans see that the caret renders correctly. Then click the button, which will scale the textarea and observe that the cursor doesn't blink... type a few characters and then arrow left to observe the caret not moving... then type again to observe characters being inserted where expected.

Here's the bug report: https://bugs.webkit.org/show_bug.cgi?id=94985

Eagerly awaiting fixes!!