Hellas,
ich hoffe das Thema passt in die Abteilung "HTML, Usability und Barrierefreiheit", weil eigentlich hat es mehr mit einem Bug im iPhone zu tun, welcher aber durch das Responsive Design passiert.
Den HTML und CSS-Code erspare ich euch, da dieser extrem lang ist und wahrscheinlich auch gar nicht benötigt wird um das Problem zu lösen.
Folgende Sachlage:
Ich habe einige Regeln mit "@media" definiert. Und leider muss ich auch per JavaScript ein paar Elemente (jQuery) umstellen, damit meine Darstellung sauber aussieht. Das meiste ist mit "display:block/none" und "height:0" sowie "overflow:hidden" gemacht. (Randbemerkung: und mit "speak:none/normal" damit es wirklich Barrierefrei ist).
In jedem Browser funktioniert alles so wie es sein soll. Wirklich in jedem? Nein. Ein kleiner Browser names Safari am iPhone leistet den Römern...äh..mir widerstand.
Ein Block (in dem das Menü versteckt wird) hat am iPhone direkt nach dem laden eine Höhe. Das ist deswegen blöd, weil ein weißer großer Kasten über dem Inhalt entsteht. Laut CSS-Definition ist das Ding aber "display:none" und "height:0"! Wenn ich jetzt das iPhone einmal drehe (ins Querformat) und dann wieder zurück drehe (ins Hochformat), dann stimmt die Darstellung plötzlich. Das mysteriöse DIV ist plötzlich (wie in CSS definiert) verschwunden.
Ich hab mir einen iPhone-Simulator von Apple heruntergeladen (ein Hoch auf Apple-XCode) und dort getestet. Und da tritt das Problem nicht auf. Ich habe andere Handys und Browser getestet, alles normal: Das DIV ist von Anfang an nicht da.
Und da hab ich jetzt mein Problem.
Mein erster Ansatz war, einfach gelegentlich mal ein RESIZE-Event durch den Browser zu schicken. Problem nicht gelöst. DIV-Block bleibt am iPhone bestehen.
Mein zweiter Ansaz war, per JavaScript nachträglich das "display:none" und die "height:0" noch inline ins Element zu schreiben. Problem nicht gelöst. DIV-Block bleibt am iPhone bestehen.
Mein dritter Ansatz wäre jetzt, dem iPhone vorzugauckeln, das sich Querformat/Hochformat geändert hat. Darüber finde ich aber kein Event, bzw. eigentlich nur das RESIZE-Event.
Und daher jetzt mein Hilferuf an euch. Jemand eine Idee/Erfahrungen/Ansatz?
ich hoffe das Thema passt in die Abteilung "HTML, Usability und Barrierefreiheit", weil eigentlich hat es mehr mit einem Bug im iPhone zu tun, welcher aber durch das Responsive Design passiert.
Den HTML und CSS-Code erspare ich euch, da dieser extrem lang ist und wahrscheinlich auch gar nicht benötigt wird um das Problem zu lösen.
Folgende Sachlage:
Ich habe einige Regeln mit "@media" definiert. Und leider muss ich auch per JavaScript ein paar Elemente (jQuery) umstellen, damit meine Darstellung sauber aussieht. Das meiste ist mit "display:block/none" und "height:0" sowie "overflow:hidden" gemacht. (Randbemerkung: und mit "speak:none/normal" damit es wirklich Barrierefrei ist).
In jedem Browser funktioniert alles so wie es sein soll. Wirklich in jedem? Nein. Ein kleiner Browser names Safari am iPhone leistet den Römern...äh..mir widerstand.
Ein Block (in dem das Menü versteckt wird) hat am iPhone direkt nach dem laden eine Höhe. Das ist deswegen blöd, weil ein weißer großer Kasten über dem Inhalt entsteht. Laut CSS-Definition ist das Ding aber "display:none" und "height:0"! Wenn ich jetzt das iPhone einmal drehe (ins Querformat) und dann wieder zurück drehe (ins Hochformat), dann stimmt die Darstellung plötzlich. Das mysteriöse DIV ist plötzlich (wie in CSS definiert) verschwunden.
Ich hab mir einen iPhone-Simulator von Apple heruntergeladen (ein Hoch auf Apple-XCode) und dort getestet. Und da tritt das Problem nicht auf. Ich habe andere Handys und Browser getestet, alles normal: Das DIV ist von Anfang an nicht da.
Und da hab ich jetzt mein Problem.
Mein erster Ansatz war, einfach gelegentlich mal ein RESIZE-Event durch den Browser zu schicken. Problem nicht gelöst. DIV-Block bleibt am iPhone bestehen.
Mein zweiter Ansaz war, per JavaScript nachträglich das "display:none" und die "height:0" noch inline ins Element zu schreiben. Problem nicht gelöst. DIV-Block bleibt am iPhone bestehen.
Mein dritter Ansatz wäre jetzt, dem iPhone vorzugauckeln, das sich Querformat/Hochformat geändert hat. Darüber finde ich aber kein Event, bzw. eigentlich nur das RESIZE-Event.
Und daher jetzt mein Hilferuf an euch. Jemand eine Idee/Erfahrungen/Ansatz?
Kommentar