css，ios，iPad，-webkit溢出滚动：触摸bug，大内容被切断 [英] css, ios, iPad, -webkit-overflow-scrolling: touch bug, large content gets cut off

问题描述

我有一个表，数千行（精确到2317），数据来自数据库。

html：

 < div class =longList> 
<！ - 表有上千行 - > 
< / div> 
  

css：

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

问题是， >在iPad上的移动safari上（在桌面浏览器上工作正常），行号为1900（显示该行的一半），列表的其余部分显示为空白。

如果我从样式中删除-webkit-overflow-scrolling：touch;，所有行都会显示。

解决方案

p>添加位置：fixed解决了这个问题，但有一个不同的问题开始，但这是另一个故事（见 css，ios，iPad，-webkit溢出滚动：触摸，大内容被切断，不能指定宽度在div ） 。

  .longList {overflow：auto; height：550px; margin：0 auto; -webkit溢出滚动：touch;位置：固定; } 
  

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?

解决方案

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; }

这篇关于css，ios，iPad，-webkit溢出滚动：触摸bug，大内容被切断的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！