ios触摸超出,css，ios，iPad，-webkit溢出滚动：触摸bug，大内容被切断

I have a table with thousands of rows (2317 to be precise) with data coming from the database. I am putting this table inside a div so it is scrollable.

html:

css:

.longList {overflow: auto; height: 550px; margin: 0 auto; -webkit-overflow-scrolling: touch;}

The problem is, the list is cutting off on mobile safari on the iPad (on desktop browsers it works fine) at row number 1900 (half of that row is shown) and the rest of the list is showing up as blank. The rows are not showing up after the 1900th row.

All rows shows up if I remove '-webkit-overflow-scrolling: touch;' from the styles.

Has anyone come across this or has any idea how to fix this?

解决方案

Adding position:fixed resolved this issue but a different problem started with that, but that's another story (see css, ios, iPad, -webkit-overflow-scrolling: touch, large content gets cut off, can't specify width on div).

.longList {overflow: auto; height: 550px; margin: 0 auto; -webkit-overflow-scrolling: touch; position:fixed; }