Why is typing in firefox causing the screen to scroll?

Question

I am having an incredibly strange isotope plugin problem only in firefox. I have a text box in each of my isotopic elements, and when I scroll to the bottom and type in one of the text areas, the screen jumps up. I reproduced this in jsfiddle:

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

I look at it for hours and cannot understand what causes this scroll even for shooting. I would like to help!

Thanks!

Answer 1

So, the problem is not the isotope. The problem is that there is an error in how firefox creates text fields after the scale3d and / or transform3d event occurs. This makes you “think” that the text field is in the upper left corner, so it jumps to the top. Here are two errors that have been submitted to Mozilla 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 problems after applying the same transforms. Namely, carriage rendering. I filed a new, but on Webkit bugzilla, which was quickly confirmed by the Webkit developer.

Here is an example error: http://jsfiddle.net/galtschul/StbKg/

Click in any of the editable fields before clicking the button and see that the caret is displayed correctly. Then press the button that scales the text box and notices that the cursor does not blink ... enter a few characters and then the left arrow to see that the carriage does not move ... then enter again to see that the characters are inserted there where it was expected.

Here is the error report: https://bugs.webkit.org/show_bug.cgi?id=94985

Pending fix!

Answer 2

As I noticed, this is due to the .isotope-item {position: absolute} property. I tried a lot, but really could not figure out the solution.