Gunnar Bittersmann: Flip Card JS richtig einstellen

Beitrag lesen

problematische Seite

@@Gunnar Bittersmann

Hier aber die Frage: Wozu der Effekt? Wem ist damit geholfen? Mir scheint: niemandem. Der Effekt ist nur um seiner selbst Willen da – ein sehr schwaches Argument, sowas zu implementieren.

Meine Einschätzung erfolgte anhand der Darstellung in meinem Browser: Firefox. Da blickt man nach der Drehung auf die Rückseite desselben Bilds, d.h. man sieht dessen Spiegelbild.

@Rolf B wies mich darauf hin, dass da doch zwei verschiedene Bilder auf Vorder- und Rückseite seien. Huch‽ Im Browser, den ich tunlichst meide wie die Covid-19, sind da tatsächlich zwei verschiedene Bilder – wobei es beim Umdrehen flackert. Im Safari flackert’s nicht, da springt’s um.

Das Flackern in Chrome liegt daran, dass du backface-visibility: hidden für das erste <div class="card__face"> gesetzt hast, aber nicht für das zweite <div class="card__face--back">.

Wenn man BEM nutzt, ist die Klassenangabe auch falsch: “Add modifier classes only to blocks/elements they modify, and keep the original class.” [BEM] Es müsste <div class="card__face card__face--back"> sein.

Das Umspringen in Safari kommt daher, dass der backface-visibility noch nicht kennt, sondern nur -webkit-backface-visibility. [CanIUse] Also beides angeben.

Warum das im Firefox nicht funktioniert, ist mir noch ein Rätsel. Zumal man durch backface-visibility: hidden die Rückseite (d.h. das Spiegelbild) doch eigentlich gar nicht sehen können sollte … 🤔

😷 LLAP

--
“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon