Table blank after swiping

Flow
1

I am having some trouble with table rendering.

Symptoms

  1. When swiping up and down the table becomes blank
  2. Continuing to swipe in one direction after the table becomes blank will often result in table rows being displayed again.
  3. When the rows become visible again the table is often incomplete with blank space at the bottom of the table. Gentle swiping up and down results in the black space increasing and decreasing respectively.
  4. Sometimes when swiping slowly up or down the table will come to rest and a moment later the row data will update. For example, rows 70 - 80 might be displayed when the table comes to rest and a moment later the row date is updated to rows 75 - 85. This makes the scrolling look very jumpy.

I wonder if anyone has seen similar behavior and might have some idea what is causing it or how to prevent it.

Steps to reproduce.

  1. Navigate to application
  2. Swipe quickly to the bottom of the table. This usually results in blank space being displayed where the table should be. If the table is still displayed correctly swipe up slowly allowing the table to completely stop between each swipe. If the table is blank, swipe up slowly until rows are displayed again.
  3. swipe up and down slowly.

Jboss 7.1.1
iPad mini iOS 7.0.2
Regular iPad iOS 7.1
Safari browser
touchkit 4.0.0.alpha2
vaadin 7.1.14

Created project with
mvn archetype:generate -DarchetypeGroupId=com.vaadin -DarchetypeArtifactId=vaadin-archetype-touchkit -DarchetypeVersion=LATEST -DgroupId=example.com -DartifactId=myproject -Dversion=0.1.0 -Dpackaging=war

Modified pom.xml by changing vaadin-version to 7.1.14

Replace MenuView.java with
TableView.java which follows.

package example.com;

import com.vaadin.addon.touchkit.ui.NavigationView;
import com.vaadin.addon.touchkit.ui.VerticalComponentGroup;
import com.vaadin.ui.Table;

public class TableView extends NavigationView {

 private static final long serialVersionUID = -8914938268427749165L;

 public TableView() {
    setCaption("RENDER");
   
    final VerticalComponentGroup content = new VerticalComponentGroup();
   
       final Table table = new Table("");
       table.addContainerProperty("Name", String.class, "Name");
       for(int i=1; i<200; i++)
       {
            String name = "Row-"+String.valueOf(i);
            table.addItem(new Object[]{name},i);
       }
       table.setWidth("100%");
       content.addComponent(table);
       setContent(content);       
};

}

Modify MytouchKitUI.java to set TableView as the current component instead of MenuView.

Build and deploy.