Mit den Einheiten VW (Vertical Width) und VH (Vertical Height) kann die Größe von HTML-Elementen relativ zur Größe des Browser- Viewports geändert werden (Mehr dazu in einen zukünfigen Blogpost). Leider ist auf dem Ipad die Implementierung dieses CSS3-Features verbuggt und somit werden die geänderten Viewport-Maße nicht neu gesetzt, wenn der User das Device dreht und somit den Modus von z.B. Landscape zu Portrait ändert. Zum Glück kann man mit JavaScript das Problem lösen.
Das Snippet zur JavaScript-Lösung des Orientation-Change-Bugs auf Ipads:
(function(document, window) {
resetVWUnits = function(e){
var ele = $(".js-vwFix");
ele.each(function(index){
if($(this).is(':visible')){
$(this).hide().show();
}
});
};
window.addEventListener('orientationchange', resetVWUnits);
}(document, window));So funktioniert's
Das Script basiert darauf das durch aus und wieder Einblenden der Elemente ,bei einen Orientation-Change, der Browser zum neuen Rendern dieser gezwungen wird.
Zunächst zeichnen wir alle relevanten Elemente, die VW/VH -Einheiten geben, mit der CSS-Klasse "js-vwFix" aus. Mittel JavaScript horchen wir nun auf das Event "orientationchange", dass auftritt sobald ein Tablet zwischen Landscape und Portrait wechselt (Quer- und Hochformat). Wenn dieses Event eintritt wird die Function resetVWUnits ausgelöst, der wir alle Elemente die VW-Units nutzen mittels der CSS-Hilfsklasse ".js-vwFix" übergeben haben.
Damit wir Elemente die wir bewusst ausgeblendet haben nicht aufeinmal einblenden, prüft das Script zunächst bei jedem Element ob dieses überhaupt schon sichtbar ist. Dann wird das Element mit hide().show() aus- und eingeblendet.
Der Nachteil der Lösung ist, das ein kurzes flackern der Elemente bei der Aus- und Einblendung nicht vermeidbar ist, aber nicht drastisch auffällig beim drehen des Tablets wirkt.