iOS (7) - Problem bei 'orientationchange'

[Gunther]

Hallo werte Selfgemeinde!

Ich arbeite gerade an einem Responsive Layout. Dazu verwende ich Media Queries und habe entsprechend verschiedene Breakpoints in meinem Layout.

Nun habe ich beim Testen folgendes Problem festgestellt:
Unter iOS (7) wenden zwar sowohl Safari, als auch Chrome, die entsprechenden Styles an, aber bei einem Orientationchange wird(werden) das(die) Element(e) nicht neu gerendert.

Das führt natürlich zu "unerwünschten" Ergebnissen.

Noch besser wird es, wenn ich testweise folgendes Script verwende:

  
function OrientChanged() {  
   $('#header').css('display', 'none');  
   alert("OrientChanged");  
   $('#header').css('display', 'block');  
}  
window.addEventListener('orientationchange', OrientChanged, false);  

Sowohl Safari, als auch Chrome zeigen zwar das Meldungsfenster an, aber das betreffende Element wird nicht aus- und wieder eingeblendet. Dementsprechend erfolgt also auch kein redraw/ repaint und somit werden die Elemente auch nicht neu dimensoniert und positioniert.

Unter Android (4.2.2) verhält sich das Skript in den von mir getesteten Browsern (Android, Chrome) wie erwartet.

Bisher ist es mir lediglich gelungen durch ein:
location.reload();
in obiger Funktion das Problem zu "lösen".

Das ist natürlich eine sehr "unschöne" Variante.

Per Google und bei SO konnte ich bis jetzt noch nichts zu dem Problem finden.

Also falls jemand diese Thematik/ Problematik kennt und mir dazu etwas sagen kann, wäre ich sehr dankbar!

Besten Dank im Voraus!

Gruß Gunther

[Gunnar Bittersmann]

@@Gunther:

nuqneH

Ich arbeite gerade an einem Responsive Layout. Dazu verwende ich Media Queries und habe entsprechend verschiedene Breakpoints in meinem Layout.

Hast du auch entsprechend orientation-Media-Queries?

Unter iOS (7) wenden zwar sowohl Safari, als auch Chrome, die entsprechenden Styles an, aber bei einem Orientationchange wird(werden) das(die) Element(e) nicht neu gerendert.

http://bittersmann.de/test/orientation funktioniert in Safari und Chrome auf iPad (iOS 6).

Qapla'

[Gunther]

@@Gunnar:

nuqneH

Besten Dank, dass du dich mit dem "Problem" beschäftigt hast!

Ich arbeite gerade an einem Responsive Layout. Dazu verwende ich Media Queries und habe entsprechend verschiedene Breakpoints in meinem Layout.

Hast du auch entsprechend orientation-Media-Queries?

Nein, habe ich (bis jetzt zumindest) nicht.
Ich arbeite mit 'min-/max-width' MQs.

Unter iOS (7) wenden zwar sowohl Safari, als auch Chrome, die entsprechenden Styles an, aber bei einem Orientationchange wird(werden) das(die) Element(e) nicht neu gerendert.

http://bittersmann.de/test/orientation funktioniert in Safari und Chrome auf iPad (iOS 6).

Das Problem ist ja auch nicht, dass die entsprechenden MQ Rules nicht matchen würden, das tun sie. Aber scheinbar werden zumindest gewisse Elemente nicht entsprechend neu gerendert, sodass ihr "Platzbedarf" nicht "berücksichtigt" wird.

Insbesondere habe ich hier "gefloatete" Elemente im Verdacht.
Ich muss mal ein entsprechendes Testszenario bauen.

Und wie gesagt, selbst die Javascript Variante "versagt" ihren Dienst ...!?

iOS ist und bleibt ein zumindest recht eigenartiges OS, um es mal vorsichtig & vornehm auszudrücken.

Gruß Gunther

[Gunther]

@@Gunnar:

nuqneH

Das Problem ist ja auch nicht, dass die entsprechenden MQ Rules nicht matchen würden, das tun sie. Aber scheinbar werden zumindest gewisse Elemente nicht entsprechend neu gerendert, sodass ihr "Platzbedarf" nicht "berücksichtigt" wird.

Insbesondere habe ich hier "gefloatete" Elemente im Verdacht.
Ich muss mal ein entsprechendes Testszenario bauen.

Und wie gesagt, selbst die Javascript Variante "versagt" ihren Dienst ...!?

So, ich habe jetzt eine "funktionierende" Variante gefunden.
Folgende Javascript (jQuery) Zeile:

$('#floated_element').attr('style', 'display:none;').attr('style', 'display:block;');  

sorgt jetzt (ohne erkennbare "Nebenwirkungen" wie Flackern, Springen etc.) dafür, dass das Element (samt Elternelement) neu gerendert wird und somit "alles passt".

Gruß Gunther

[Gunnar Bittersmann]

@@Gunther:

nuqneH

$('#floated_element').attr('style', 'display:none;').attr('style', 'display:block;');

Für .attr('style', …) gibt es in jQuery .[link:http://api.jquery.com/css/@title=css](…).

Für die display-Eigenschaft sollte aber auch $('#floated_element').hide().show(); dasselbe tun.

Qapla'

[Gunther]

@@Gunnar:

nuqneH

$('#floated_element').attr('style', 'display:none;').attr('style', 'display:block;');

Für .attr('style', …) gibt es in jQuery .[link:http://api.jquery.com/css/@title=css](…).

Für die display-Eigenschaft sollte aber auch $('#floated_element').hide().show(); dasselbe tun.

Sollte ...!
Tut es aber nicht.

Weder

$('#floated_element').css('display', 'none').css('display', 'block');  

noch

$('#floated_element').hide().show();  

bewirken irgendetwas.

Nur die Variante mit dem Style Attribut hat den gewünschten Effekt!

Gruß Gunther

[Matthias Apsel]

Om nah hoo pez nyeetz, Gunther!

Weder

$('#floated_element').css('display', 'none').css('display', 'block');

> noch  
> ~~~javascript

$('#floated_element').hide().show();  

> 

bewirken irgendetwas.

weil wahrscheinlich die JQuery-Methoden dahingehend optimiert sind, nicht sinnloserweise aufgerufen zu werden, wohingegen .attr() einfach das attribut setzt.

Matthias

[Gunther]

Om nah hoo pez nyeetz, Matthias!

Weder

$('#floated_element').css('display', 'none').css('display', 'block');

> > noch  
> > ~~~javascript

$('#floated_element').hide().show();  

> > 

bewirken irgendetwas.

weil wahrscheinlich die JQuery-Methoden dahingehend optimiert sind, nicht sinnloserweise aufgerufen zu werden, wohingegen .attr() einfach das attribut setzt.

Das ist gut möglich, denn es "bewirkt" auch unter Android nichts (mit einem 'delay(1000)' dazwischen).

Unter iOS ist es halt erforderlich, irgendeine Variante zu finden, die ein Re-rendering der Seite auslöst. Und das klappt zum Glück mit der Attribut-Variante.

Gruß Gunther