どうも！LSSです！！
CSS等の動作テスト用iPhoneが欲しいなーと思いながら、未だに入手していません。
iPhoneの標準ブラウザ「Safari」がいくつかのCSSの実装が間に合っていなかったり、解釈が違ったりするから、なんですが、また新たにこのブログで使っていたネタの不具合が見つかりました。
最近よくLSSのブログのネタを使っていただいている、noriko(id:non704)さんのところで分かったのですが、
こちらのコメントに、LSSのところにもよくコメントを下さっている421miyako(id:m421miyako)さんのコメントで、裏側が反転して見えてしまう、という現象が！
transform:rotateY(180deg);
で裏返した要素は、デフォルトでは裏側からみたように反転してみえます。
こんな感じ
<span style="transform: rotateY(180deg); display: inline-block;">こんな感じ</span>
カードをめくるなどの時には、裏返った時には見えないようにするために、「backface-visibility:hidden;」というのをつけています。
ところが、これがSafariでは正式対応していないんですね^^;
正式対応はしていませんが、プレフィクスをつけると動作するので、
backface-visibility:hidden;
だったところを、
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
とすると、Safariでもそれ以外のブラウザでも、裏返った時に非表示になってくれます^^
早速試して確認してくださったnoriko様、ありがとうございます！
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
