Question

Edited:[All the following happens even on stock IOS browser]

I have a UiWebView which load a local HTML page.
The content of the page is managed dinamically by JS, so it may grow or shrink vertically.

The layout is:

<div id="myContainer">
Some text here
</div>

The text-content may grow up to require vertical scroll, and everything is working fine.

Whenever i load new content, I use:

container.innerHTML = '';
container.appendChild(newContent);

Again, everything is fine.

The problem came when i scroll the page vertically: if I load a big content, the scroll is managed correctly, but then I load a small content and the page keeps the same big size set by the big content, with a lot of unused blank space at the end.

If i don’t ever try to scroll the page vertically, the problem don’t shows up (eg. i load the big content, I don’t scroll, then I load the small content => the scroll is fine and page is shrinked to the latter). That’s quite weird, I think something may be broken in the ScrollView logic or in the Webkit engine.

I already tried by using timeouts between innerHTML = ” and appendChild.
No luck here.

I’m experiencing this problem just on IOS stock browser & UiWebView, not on any desktop browser nor Android mobile browser / WebView.

Could anyone help?

Thanks

Edit:
Reloading the UiWebView by browsing a blank URL or anything else is not an applicable way in this case: my app is fully JS and I definitely cannot restart the app each time.

Answer 1

Finally, i came across a fix for this, I post here so that it may help someone other. The problem was about the containing div that won’t shrink. I just set height of the container to zero while changing its content, and it return to correct size:

container.innerHTML = '';
container.style.height = '0px';
container.appendChild(newContent);