CODEWITHSUNDEEP
ioscssjquery-mobilemobile-safari
WhatsInAName
WhatsInAName

Reputation: 724

css, ios, iPad, -webkit-overflow-scrolling: touch bug, large content gets cut off

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:

<div class="longList">
  <!-- table with thousands of rows -->
</div>

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?

Upvotes: 2

Views: 7304

Answers (1)

WhatsInAName
WhatsInAName

Reputation: 724

Adding position:fixed resolved this issue but a different problem started with that, but that's another story (see -webkit-overflow-scrolling: touch, large content gets cut off when specifying a width).

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

Upvotes: 3

Related Questions