title: How do I get my image that uses backface-visibility to not disappear after transforming?
body: <p>I've looked at other questions on here with similar issues, but couldn't get their solutions to help fix mine.</p>
  <p>Here is the fiddle: <a href="http://jsfiddle.net/darknessflowers/6k512emb/" rel="nofollow noreferrer">http://jsfiddle.net/darknessflowers/6k512emb/</a></p>
  <p>The problem is that the parent div (card) having a background stops the image from displaying after transform when in browsers such as Chrome and Safari. It works perfectly in Firefox.</p>
  <p>I have tried removing the background from the parent div, and putting it on the images instead but if I do that then the transform does not animate smoothly so I have reverted back to this code, which is the closest I have come to getting what I want.</p>
  <p>Relevant HTML sample: (src for frontFace images is added in the JS. Hidden class also gets removed. Full code in JSFiddle)</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const cards = document.querySelectorAll('.card');
  let score = 0;
  let scoreDisplay = document.querySelector('.score');
  let cardsTurnedNum = 0;
  let cardsTurned =[];
  let lockBoard = false;
  var startTime, endTime;
  let finalTime = document.querySelector('.finalTime');
  
  let pairs = [
    {
      id: 1,
      frontFace: 'https://picsum.photos/id/1000/400',
      found: false,
    },
    {
      id: 2 ,
      frontFace: 'https://picsum.photos/id/1001/400',
      found: false,
    },
    {
      id: 3 ,
      frontFace: 'https://picsum.photos/id/1001/400',
      found: false,
    },
    {
      id: 4 ,
      frontFace: 'https://picsum.photos/id/1002/400',
      found: false,
    },
    {
      id: 5 ,
      frontFace: 'https://picsum.photos/id/1003/400',
      found: false,
    },
    {
      id: 6 ,
      frontFace: 'https://picsum.photos/400',
      found: false,
    },
    {
      id: 7 ,
      frontFace: 'https://picsum.photos/400',
      found: false,
    },
    {
      id: 8 ,
      frontFace: 'https://picsum.photos/400',
      found: false,
    },
    {
      id: 9 ,
      frontFace: 'https://picsum.photos/400',
      found: false,
    },
    {
      id: 10 ,
      frontFace: 'https://picsum.photos/400',
      found: false,
    },
    {
      id: 11 ,
      frontFace: 'https://picsum.photos/400',
      found: false,
    },
    {
      id: 12 ,
      frontFace: 'https://picsum.photos/400',
      found: false,
    },
    {
      id: 13 ,
      frontFace: 'https://picsum.photos/400',
      found: false,
    },
    {
      id: 14 ,
      frontFace: 'https://picsum.photos/400',
      found: false,
    },
    {
      id: 15 ,
      frontFace: 'https://picsum.photos/400',
      found: false,
    },
    {
      id: 16 ,
      frontFace: 'https://picsum.photos/400',
      found: false,
    },
    {
      id: 17 ,
      frontFace: 'https://picsum.photos/400',
      found: false,
    },
    {
      id: 18 ,
      frontFace: 'https://picsum.photos/400',
      found: false,
    },
    {
      id: 19 ,
      frontFace: 'https://picsum.photos/400',
      found: false,
    },
    {
      id: 20 ,
      frontFace: 'https://picsum.photos/400',
      found: false,
    },
  ];
  
  let shuffledArray = shuffleArray(pairs); //will mutate original array
  
  function shuffleArray(array) {
    for(let i = array.length - 1; i &gt; 0; i--) {
      const j = Math.floor(Math.random() * (i+1));
      const temp = array[i];
      array[i] = array[j];
      array[j] = temp;
      // return temp;
    }
  return array;
  }
  let firstCard, secondCard;
  let hasBeenFlipped = false;
  
  function flipCard(e) {
    if (lockBoard) return;
  
    if(!hasBeenFlipped) {
      firstCard = this;
  
      hasBeenFlipped = true;
    } else {
      secondCard = this;
      hasBeenFlipped = false;
      // return;
    }
    this.classList.add('flip');
    this.lastElementChild.classList.remove('hidden');
    this.firstElementChild.classList.add('hidden');
  
    cardsTurned.push(this.lastElementChild.src);
    // console.log(cardsTurned);
    if(cardsTurned.length === 2) {
      console.log('2 turned');
      if(firstCard.lastElementChild.src === secondCard.lastElementChild.src) {
        increaseScore();
        cardsTurned = [];
        firstCard.classList.add('permaFlip');
        secondCard.classList.add('permaFlip');
      } else {
        lockBoard = true;
        console.log('flipping back');
        cardsTurned = [];
  
        setTimeout(function() {
          cards.forEach((card) =&gt; {
            card.classList.remove('flip');
            card.firstElementChild.classList.remove('hidden');
            card.lastElementChild.classList.add('hidden');
            lockBoard = false;
          });
        },1000);
      }
    }
  }
  function addImage() {
    //loop through array of cards and attach image from corresponding index of shuffled array
    cards.forEach((card,index) =&gt; { 
      card.lastElementChild.src = shuffledArray[index].frontFace;
    });
  }
  function increaseScore() {
    score++;
    scoreDisplay.innerHTML = `${score}/10`;
    if(score === 10) {
      //stopTimer
      endTimer();
      setTimeout(() =&gt; {
        winnerBox.classList.add('open');
      },300);
    }
  }
  
  function startTimer() {
    startTime = performance.now();
  };
  
  function endTimer() {
    endTime = performance.now();
    let timeDiff = endTime - startTime; //in ms 
    // strip the ms 
    timeDiff /= 1000; 
    
    // get seconds 
    let seconds = Math.round(timeDiff);
    finalTime.innerText = `${seconds} seconds`;
    console.log(seconds + " seconds");
  }
  //add all images to random cards on load
  addImage();
  startTimer();
  //add event listener for clicking of cards
  cards.forEach(card =&gt; card.addEventListener('click', flipCard));</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 15px;
    perspective: 1000px;
    margin-bottom: 30px;
  }
  
  .card {
    background: #fbfd8a;
    border-radius: 10px;
    height: 150px;
    padding: 10px;
    display: flex;
    justify-content: center;
    transition: transform 0.5s;
    transform-style: preserve-3d;
    cursor: pointer;
  }
  .card .frontFace,
  .card .backFace {
  backface-visibility: hidden;
  }
  .card .frontFace,
  .card .backFace {
    object-fit: cover;
    max-width: 100%;
    object-position: center;
  }
  .card.flip, .card.permaFlip {
    transform: rotateY(180deg);
  }
  .frontFace {
    transform: rotateY(180deg);
  }
  .card.flip .frontFace,
  .card.permaFlip .frontFace {
    display: block;
  }
  .card.flip .backFace,
  .card.permaFlip .backFace {
    display: none;
  }
  .frontFace.hidden {
    display: none;
  }
  .backFace {
    transform: translateZ(1px);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="grid"&gt;
        &lt;div class="card"&gt;
          &lt;img src="https://picsum.photos/id/1025/200/300" alt="Cat - Back of card" class="backFace"&gt;
          &lt;img src="" alt="" id="1" class="frontFace hidden"&gt;
        &lt;/div&gt;
        &lt;div class="card"&gt;
          &lt;img src="https://picsum.photos/id/1025/200/300" alt="Cat - Back of card" class="backFace"&gt;
          &lt;img src="" alt="" id="2" class="frontFace hidden"&gt;
        &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I have been stuck on this for a few days so would really appreciate help to get this working! Thank you.</p>