We have a website that has gaps appear between elements when displayed on an iPad, after the device is rotated. The gaps disappear again if the page is refreshed.
Found this question on here which I'm trying (but don't have an iPad to test on before passing back to the client), so thought I'd ask to see if anyone could give a definitive answer on whether you can force a page re-render after rotation, using JS?
Are you detecting the orientation change?
You may want to look at this question: How do I correctly detect orientation change using javascript and Phonegap in IOS?
or this article:
http://www.williammalone.com/articles/html5-javascript-ios-orientation/
Then to force a redraw you could look at this question:
Force DOM redraw/refresh on Chrome/Mac
Put a div around all of your content.
Basically you use window.onorientationchange to detect the change.
Then when you detect a change, then just set the display on the main div to 'none' and then use a timeout to allow the page to redraw, then change it back to visible, and it will be redrawn.
I haven't tried this, but it should work.