JQuery Akkordeon unter IOS8 anders

[ragukro]

Hallo,
ich verstehe nicht ganz, warum die Darstellung meiner mobilen Website seit IOS 8 anders aussieht, als noch unter IOS 7.
Im Akkordeon Menü war immer ein Dreieck zur Seite zeigend im geschlossenen Zustand und ein nach unten zeigendes im geöffneten Zustand - das ist immer noch so.

Aber der Menütext / die Menü-Überschrift dazu stand neben diesem Dreieck - seit IOS 8 aber eine Zeile tiefer.

Dass ich den Website Code nicht verändert habe ist vermutlich klar.

hat da Jemand eine Meinung zu?

Jquery binde ich so ein:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

Die Akkordeon Überschriften generiere ich so:

<div class="trigger"><div class="trigger_wrapper">
        <div class="trigger_icon"></div><h2>Standtort Hörn</h2><div class="clear"></div></div></div>

und die Styles dazu sind:

    .trigger {
            border-bottom: 1px solid #FFFFFF;
            width: 100%;
            cursor: pointer;
        }
            .trigger_wrapper {
                padding: 1.3em 1.5em;
                color: #FFFFFF;
                background: #890A00;   /* Mare rot  */
            }                    
            .trigger_icon {
                width: 0px;
                height: 100%;
                border-style: solid;
                border-width: 0.7em 0 0.7em 1.218em;
                border-color: transparent transparent transparent #FFFFFF;
                float: left;
                margin: 0 1em 0 0;
                opacity: 0.7;
            }
            .trigger_active .trigger_icon {
                width: 0px;
                height: 0px;
                border-style: solid;
                border-width: 1.218em 0.7em 0 0.7em;
                border-color: #FFFFFF transparent transparent transparent;
                float: left;
                margin: 0 1em 0 0;
                opacity: 0.9;
            }
.clear {
            display: block;
            visibility: hidden;
            clear: both;
            height: 0;
        }

Ich danke Euch!

Gruß Rainer

 

[ragukro]

.. ich vergaß:
Diese "falsche" Darstellung sehe ich nur auf dem IPhone (4s oder 5s). Wenn ich die Seite mit einem Desktop Browser ansurfe, dann ist alles ok. Wie das mit Android ist kann ich im Moment nicht überprüfen, wird aber sicher dort auch ok sein.

Ich habe mal die Schriftgröße verkleinert - kein Effekt (also die Schrift war halt kleiner:))

 

[ragukro]

... ich habe die h2 Style Definition vergessen Euch zu zeigen:

.trigger_wrapper h2 {
 color: #FFFFFF;
 font-weight: bold;
 font-size: 1.0em;
 display: block;
 float: left;
 width: 90%;
 }}

 

[ragukro]

gelöst:
schon ein wenig peinlich. Seit Tagen denke ich darauf rum, und nachdem ich das Problem hier formuliert habe, ist es ganz einfach:
In der h2 Definition habe ich die Weite auf 85% reduziert und schon passt es in die gleiche Zeile. Vermutlich ist aus irgendeinem unerfindlichen Grund das Dreieck Icon unter dem neunen Apple IOS ein wenig breiter geworden und da waren die Weite 90% wohl zuviel.

´tschuldigung, dass ich Euch damit behelligt habe...