Category Archives: flexbox

Flexbox bug Rotating Device with iOS Keyboard Up

Just discovered this bug today. It involves flexbox not rendering correctly when the user has the iOS keyboard up (they have focus on a text input or editable div) and then rotate the device. Here is a screenshot of what I am talking about.

flex box rendering issues

I am not sure where it comes from or how it is caused, but I do know how to fix it. Playing around in debug mode when you reset the window’s scroll:

?View Code JAVASCRIPT
1
window.scrollTo(0,0)

flexbox snapped correctly into position. ┬áCombining this with iOS’s orientation change event from the window:

?View Code JAVASCRIPT
1
2
3
4
5
window.addEventListener("orientationchange", function() {
    window.setTimeout(function(){
        window.scrollTo(0, 0);
    }, 0);
}, false);

Gives you work around for the rendering issue. Hope this works for others.