FireFox Table performance problem


Our team is facing a serious performance problem with a Table when using FireFox. Chrome, Opera and even IE all work fine, but FireFox doesn’t.

We have a Table with 15 columns, mostly TextFields, and a Button that adds a new row to the end. Display should naturally scroll to make the new row visible. However, this results in FireFox flashing either the Table area or the entire browser window. Grey is most common, but other mixed up graphics also appear. Also, drawing the Table takes several seconds. No other browser suffers from the flash or the slowness.

We’ve tried setting table cache rate to 0.0 and reducing columns as well as rows, but even with a very limited set, it seems that adding rows to a Table dynamically is a problem with FireFox. If we remove the line of code we’re using to set the new line visible:
, things become faster, but usability goes out of the window.

It seems like any explicit call to Table to scroll it causes everything to be redrawn, even if only a simple scroll would suffice in our case, since we’re always adding to the end. I thought about extending Table and making my own method for adding to the end, but so many fields of the class are private that this is practically impossible.

Have I made a mistake in using a Table that gets new rows? The row addition operation would in average be used some 80 times per visit to the page, so 3-4 seconds to redraw the Table per addition - along with the messed up graphics - is not acceptable. Can the Table cope with this, or do I need to rethink our approach? We tried a grid with csslayout also, but there we got the problem that we lose Table’s lazy loading capabilities between server and client. It became very slow with ~60 rows, so slow as to crash the javascript.

Here’s code to reproduce the problem:

import com.vaadin.Application;
import com.vaadin.ui.Button;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.Component;
import com.vaadin.ui.Table;
import com.vaadin.ui.Table.ColumnGenerator;
import com.vaadin.ui.TextField;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.Window;
public class HelloWorld extends Application implements Button.ClickListener {
      private TestTable testTable;
      public void init() {
                      Window main = new Window();
                      testTable = new TestTable();
                      VerticalLayout layout = new VerticalLayout();
                      layout.addComponent(new Button("Add", this));
       public void buttonClick(ClickEvent event) {
                     int index = testTable.size() - testTable.getPageLength() + 1;
        public class TestTable extends Table {
                  public TestTable() {
                        for (int i = 0; i < 10; i++) {
                                addGeneratedColumn("col "+i, new TestColumnGenerator());
                        for (int i = 0; i < 10; i++) {
       public class TestColumnGenerator implements ColumnGenerator {
               public Component generateCell(Table source, Object itemId, Object columnId) {
                             TextField textField = new TextField();
                              return textField;

There are multiple similar flickering problems in Firefox 3.x, mainly when an element that has been scrolled down (or right) is updated. It seems like everything is redrawn but in practice in most cases it is just Firefox that redraws the screen buffer by first setting it to gray and then redrawing eveything. There are workarounds for some cases in some components (TabSheet and Table come to mind first) but usually the problem is hard to work around.

Another problem in Firefox 3 is that drawing a TextField with a value is multiple times slower than drawing an empty TextField. Therefore you will see in Firefox that when you add a row the TextFields are all first drawn as empty and then populated with their respective values.

Firefox 4 fixes both those problems and FF4B10 handles the case you pasted much better than FF3.6