-webkit-overflow-scrolling: touch, large content gets cut off when specifying a width

问题

Large content like a table with thousands of row was getting cut off when put inside a scrollable div (see css, ios, iPad, -webkit-overflow-scrolling: touch bug, large content gets cut off)

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

css:

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

I solved this following http://johanbrook.com/browsers/native-momentum-scrolling-ios-5/ after some research.

So, adding position:fixed resolved this issue but gave birth to a new problem: the table was filling up the entire page width before introducing position:fixed, after adding position it stopped to do that.

Updated css:

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

I tried to solve it by specifying a width on the div (with class longList) but whenever I specify any width on the div, I am back to the original problem, while the table fills up the entire page now (width-wise), the content gets cut off again!

Anybody came across a situation like this?

回答1:

So I've found a solution that works for this. I was having a similar problem both with iFrames and divs with embedded content. I'm not sure how well this works for iFrames, but for divs it seems to do the trick.

Use the following line of code after the page is loaded while the offending element is visible on the page. This forces a repaint/reflow of the element and it will show the full content.

//Fix for mobile webkit browsers not rendering full content
$('.divWithContent').parent().hide().show(0);

You may need to add a wrapper just for the div or iFrame that is having the problem if you don't have one already, that way you aren't flashing or rebuilding more content than you need to.

Sample structure:

<div class="wrapper">
    <div class="divWithContent">
    ...
    </div>
<div>

If your div is visible on page load, here's one way you could use this solution. You may need to add a slight delay too:

$(document).ready( function() {
    $('.divWithContent').parent().hide().show(0);
}

This will not work if the element is currently hidden. It doesn't seem that the element has to be currently visible in the device viewport, but it must at least be on the page and not hidden.

来源：https://stackoverflow.com/questions/17582439/webkit-overflow-scrolling-touch-large-content-gets-cut-off-when-specifying-a

标签

ios

css3

mobile-safari