• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage doppeltes rotateY unter iOS

HTML_Felix

Neues Mitglied
Ich habe eine Seite, wo sich Kacheln drehen. (hisvoice.de)
Mein Problem: Unter iOS klappt das nicht. Die rotierte Seite ist weiß. Ich konnte den Fehler einkreisen. Ich rotiere zweifach: Einen äußeren Div, damit sich die Kachel überhaupt dreht und einen inneren Div, damit nicht der neue Inhalt spiegelverkehrt ist. Anscheinend kommt iOS nicht damit klar.

Ich habe das Problem auf einen simplen Code reduzieren können:
<html>
<body>
<div style="height:200px;width:200px;background-color:#456; -webkit-transform:rotateY( 180deg );transform:rotateY( 180deg );">
<div style="height:180px;width:180px;background-color:#f56; -webkit-transform:rotateY( 180deg );transform:rotateY( 180deg );"><h1>Juhu</h1></div>
</div>
</body>
</html>

Das gibt es nochmals auch online:
http://hisvoice.de/test.html

Diese doppelte Rotation klappt unter Win10 in den folgenden Browsern: Chroma, FF, IE, sogar Safari
Aber nicht auf iOS Geräten. Gibt es da eine Idee?

Danke

Felix
 
Werbung:
Ich habe eine Seite, wo sich Kacheln drehen. (hisvoice.de)
Mein Problem: Unter iOS klappt das nicht. Die rotierte Seite ist weiß. Ich konnte den Fehler einkreisen. Ich rotiere zweifach: Einen äußeren Div, damit sich die Kachel überhaupt dreht und einen inneren Div, damit nicht der neue Inhalt spiegelverkehrt ist. Anscheinend kommt iOS nicht damit klar.

Ich habe das Problem auf einen simplen Code reduzieren können:
<html>
<body>
<div style="height:200px;width:200px;background-color:#456; -webkit-transform:rotateY( 180deg );transform:rotateY( 180deg );">
<div style="height:180px;width:180px;background-color:#f56; -webkit-transform:rotateY( 180deg );transform:rotateY( 180deg );"><h1>Juhu</h1></div>
</div>
</body>
</html>

Das gibt es nochmals auch online:
http://hisvoice.de/test.html

Diese doppelte Rotation klappt unter Win10 in den folgenden Browsern: Chroma, FF, IE, sogar Safari
Aber nicht auf iOS Geräten. Gibt es da eine Idee?

Danke

Felix

Problem ist dass sich die Elemente überlappen. Sieht man gut wenn du mal 181deg verwendest.
Im Safari OSX ist der gleiche Fehler.

Kann jetzt zwar nicht genau sagen warum, aber das sollte es lösen:

Code:
div:before {
  display:block;
  content:"";
}
 
Werbung:
Der Wahnsinn, das scheint echt zu klappen. Danke, du hast mir echt geholfen. Ich war schon voll am verzweifeln. Die Animation ist zwar jetzt auf iOS nicht mehr so hübsch, da sich der Inhalt nicht genau in der Mitte der Rotation ändert, aber es dreht sich und der Inhalt kommt.
Wenn du mal Zeit hast, wäre es nett, mir das zu erklären. Warum nutzen wir :before? Kann man nicht "display:block" direkt in die Klasse setzen?

Felix
 
Zurück
Oben