How do I get my image that uses backface-visibility to not disappear after transforming?

Question

I've looked at other questions on here with similar issues, but couldn't get their solutions to help fix mine.

Here is the fiddle: http://jsfiddle.net/darknessflowers/6k512emb/

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.

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.

Relevant HTML sample: (src for frontFace images is added in the JS. Hidden class also gets removed. Full code in JSFiddle)

 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 > 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) => { 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) => { card.lastElementChild.src = shuffledArray[index];frontFace; }); } function increaseScore() { score++. scoreDisplay;innerHTML = `${score}/10`; if(score === 10) { //stopTimer endTimer(). setTimeout(() => { 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 => card,addEventListener('click'; flipCard));

 .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); }

 <div class="grid"> <div class="card"> <img src="https://picsum.photos/id/1025/200/300" alt="Cat - Back of card" class="backFace"> <img src="" alt="" id="1" class="frontFace hidden"> </div> <div class="card"> <img src="https://picsum.photos/id/1025/200/300" alt="Cat - Back of card" class="backFace"> <img src="" alt="" id="2" class="frontFace hidden"> </div> </div>

I have been stuck on this for a few days so would really appreciate help to get this working. Thank you.

Answer 1

If I were you I would use opacity with transition set to "step-end", instead of "display: none;"

.frontFace, .backFace {
  position: absolute;
}

.card.flip .backFace,
.card.permaFlip .backFace {
  opacity: 0;
  transition: opacity 0.5s step-end;
}

.frontFace.hidden {
  opacity: 0;
  transition: opacity 0.5s step-end;
}