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.
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);