In Safari, if you have a layout container that's absolutely positioned to take up, at a minimum, its whole container (which isn't unheard of in "appey" internet home page thingies) using CSS like this:
.absolutely
position: absolute
min-height: 100%
min-width: 100%
And the page looks like this:
And then you turn your phone like this:
And then you turn your phone back:
13 years of developing orientation change management into iOS has not been enough to repaint a browser window, apparently.
JavaScript!
const resetAbsolutePositioningAfterOrientationChangeBecauseIosIsLiterallyBroken = () => {
if (!isIos()) return
window.addEventListener('orientationchange', () => {
document.querySelectorAll('.absolutely').forEach(node => {
node.classList.remove('absolutely')
setTimeout(() => {
node.classList.add('absolutely')
}, 150)
})
})
}
const isIos = () =>
_.includes([
'iPhone', 'iPad', 'iPod',
'iPhone Simulator', 'iPad Simulator', 'iPod Simulator'
], navigator.platform)
const main = () => {
// app start stuff…
// this bullshit:
resetAbsolutePositioningAfterOrientationChangeBecauseIosIsLiterallyBroken()
}
150ms was, of course, the shortest timeout I could set for the class to be added before the layout was broken by the orientation change. Fortunately, it's barely perceptible by the user in my case.