東京都府中市、九段下のWEB制作会社Maromaroのブログです

2019.06.24

sachika

iPhoneでbackface-visibilityが効かない時の対処法

こんにちは。Maromaroのsachikaです。

先日、「クリックすると要素がくるっと回転する」というアニメーションを実装する機会がありました。

実装方法はCSSのtransformとJSを使用するだけなのでとっても簡単だったのですが、
iPhoneの実機でチェックしたところ、なぜかアニメーションが上手くいかない・・・
という事態が起きたので、対処法をメモしておきます。

こちらが実装したコード↓

  • RESULT
  • HTML
  • CSS
  • JS
  • front

    back

  • コピー
    
    <div class="card">
    <div class="front">
    <p>front</p>
    </p></div>
    <div class="back">
    <p>back</p>
    </p></div>
    </p></div>
    
  • コピー
    .card {
      position: relative;
      width: 150px;
      height: 100px; }
      .card .front, .card .back {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
        transition: transform 1s;
        backface-visibility: hidden; }
      .card .front {
        color: #fff;
        background: #069EFF; }
      .card .back {
        color: #fff;
        background: #00C792;
        transform: rotateY(-180deg); }
    .flipped .front {
      transform: rotateY(180deg); }
    .flipped .back {
      transform: rotateY(0); }
    
  • コピー
    $(function(){
      $('.card').on('click',function(){
        $('.card').toggleClass('flipped')
      });
    });
    

一見、PCで見ると何も問題が無いように見えるのですが、
iPhoneの実機で見ると、表側に存在している要素がなぜか表示されないのです。

要素の非表示には
backface-visibility: hidden;
を使用しているのですが、どうやらこの要素がiPhoneの際は効いていない様子。

そこで、backface-visibilityの対応状況をCan I useで調べてみることに。

すると、やはり「backface-visibility」だけはベンダープレフィックスが必要でした。

ということで、backface-visibilityプロパティの頭に「-webkit-」とつけてみたところ・・・

きちんと動きました!

正常に動作したコード↓

  • RESULT
  • HTML
  • CSS
  • JS
  • front

    back

  • コピー
    
    <div class="card2">
    <div class="front2">
    <p>front</p>
    </p></div>
    <div class="back2">
    <p>back</p>
    </p></div>
    </p></div>
    
  • コピー
    .card2 {
      position: relative;
      width: 150px;
      height: 100px; }
      .card2 .front2, .card2 .back2 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
        transition: transform 1s;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden; }
      .card2 .front2 {
        color: #fff;
        background: #069EFF; }
      .card2 .back2 {
        color: #fff;
        background: #00C792;
        transform: rotateY(-180deg); }
    .flipped2 .front2 {
      transform: rotateY(180deg); }
    .flipped2 .back2 {
      transform: rotateY(0); }
    
  • コピー
    $(function(){
      $('.card2').on('click',function(){
        $('.card2').toggleClass('flipped2')
      });
    });
    

今回の一件で、
①普段見かけないプロパティを使う際は必ず「Can I use」で調べる
②実機確認は必ず行う
という教訓を得ることができました。

皆さんも、SP版を作成する際は、実機確認を忘れずに!

以上、sachikaでした。