Firefox textarea typing causing screen shaking (firefox2 winXP)

Question

EDIT: Firefox 2 windows XP

Steps to reproduce problem:

Firefox 2 and visit: http://resopollution.com/rentfox/html/property_setup.html

Begin Typing and pressing [enter key] to create new lines

After about 10 [enter key] presses you'll notice the screen shaking

How this happened

This began happening after I installed a plugin for jQuery. It's located here: http://resopollution.com/rentfox/html//js/textarea.js

It makes it so the textarea is expandable as I type, depending on how many lines there are in the text area, up to a max-height value which can be specified in CSS.

I tried disabling the 'setHeight' function within this plugin (the only thing that changes height dynamically) but I still saw the screen shaking.

When I think the problem might be

Firefox thinks that the screen just got larger, and compensates by putting in a scrollbar on the right side of the body document.

However, it realizes that in fact the page didn't get larger, and removes the scrollbar, causing the shaking.

I have no idea where in the code that makes Firefox think this way...

Appreciate any help.

Answer 1

Can't reproduce, works fine here in Mac OSX + Firefox 3.5.

Answer 2

I can reproduce it (Debian Lenny, IceWeasel 3.0.6), but only with a very, very specific window size for FireFox (just slightly taller than 1024px, depending on your system font size, window manager and number of toolbars shown).

Just make your page slightly shorter or taller and the problem goes away. The problem only occurs when the addition of a new line after the 10th or so causes firefox to grown the page just enough to cause the scrollbar to appear. Just as you guessed.

That's a tiny 10px margin that is dependent on a lot of browser and system specific settings. In your page that margin is somewhere around the 1024px limit, depending on system font, toolbars, window decorations and the phase of the moon. Move that margin out of the 1024px region. Either make the page 40-50px shorter so that the scrollbar does not appear (even with large system fonts and an extra toolbar) or make it taller so the scrollbar is always there. Zoltan Lengyel's answer in this thread to always force the scrollbar can also be used.

Answer 3

I can reproduce it in Firefox 3.0.11 in Win XP.

Adding overflow:hidden to the body tag seemed to fix the problem, but doing that may wind up causing you more grief then disabling the plugin altogether. Giving the body tag overflow-x:scroll will stick a scrollbar there permanently but seems to solve it, too.

Answer 4

You can either force a scrollbar: http://css-tricks.com/eliminate-jumps-in-horizontal-centering-by-forcing-a-scroll-bar/

or hide the overflow of the div and try to get rid of the scrollbar, try overflow: hidden instead of auto in the div propertySetup

Answer 5

I reproduced it on Windows, FF3.

Interestingly it seems to happen within the jQuery .height() function! Unfortunately you're using the minified version, so that's as far as I can get.