const flipCards = document.querySelectorAll('.flip-card');
const viewMoreButtons = document.querySelectorAll('#view-more-details-button');
const viewSummaryButtons = document.querySelectorAll('#view-summary-button');

// Loop through the buttons and add event listeners
viewMoreButtons.forEach((button) => {
  button.addEventListener('click', function() {
    // Get the flip-card-inner element that corresponds to the button clicked
    const flipCardInner = button.closest('.flip-card').querySelector('.flip-card-inner');

    // Toggle the 'flipped' class to trigger the flip effect
    flipCardInner.classList.toggle('flipped');
  });
});

viewSummaryButtons.forEach((button) => {
  button.addEventListener('click', function() {
    // Get the flip-card-inner element that corresponds to the button clicked
    const flipCardInner = button.closest('.flip-card').querySelector('.flip-card-inner');

    // Remove the 'flipped' class to trigger the flip effect
    flipCardInner.classList.remove('flipped');
  });
});

html,
body {
  margin: 0 0 200px 0;
  padding: 0;
}

body {
  background: white;
  overflow-x: hidden;
}

/* Nav Bar */

nav {
  font-size: 1.25rem;
  height: 5rem;
  z-index: 999;
  position: sticky;
  top: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: lightblue;
  padding: 0 6rem;
  width: 100vw;
  box-sizing: border-box;
}


#nav-logo {
  height: 40px;
  font-family: "Roboto";
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-grow: 1;
}

nav li {
  display: flex;
  align-items: center;
  padding: 0px 2rem;
}

nav a {
  text-decoration: none;
  transition: 0.2s ease;
}


#nav-name {
  font-size: 36px;
  font-weight: 800;
  font-family: "Roboto";
}

#contact-nav {
  color: white;
  padding: 1.1rem;
}



#card h1 {
  font-size: 3.5rem;
  margin: 4rem 0 4rem 0;
}

.style-card h1 {
  margin-top: 0 !important;
}

#card {
  width: 100vw;
  height: auto;
  background: white;
  margin-bottom: 5rem;
}

#card-grid {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  width: 90vw;
  grid-gap: 1px;
}

.style-card {
  background-color: transparent;
  /*#a2b1bd;*/
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  width: 24%;
  aspect-ratio: 1/1.3;
}


#card h3 {
  margin: 0;
}

#card img {
  background-color: transparent;
  border-radius: 1rem;
  width: 96px;
  height: 96px;
}


.style-card ul {
  list-style-type: "> ";
  width: 60%;
  margin: 0;
}

.style-card li {
  padding: .55rem 0;
}

.style-card button {
  border: none;
  padding: 1rem 0;
  border-radius: 15rem;
  color: white;
  width: 60%;
  font-size: 1.01rem;
  background-color: black;
  transition: 0.2s ease;
}

.style-card button:hover {
  cursor: pointer;
  background-color: #2834b5;
}


.banner {
  width: 100%;
  margin: 0 !important;
  text-align: center;
  font-size: 1.2rem;
  color: white;
  border-radius: 16px 16px 0 0;
  margin: 0;
  padding: .5rem 0;
  margin-bottom: -1.25rem;
  top: 0;
  left: 0;
  z-index: 2;
  background-color: transparent;
  height: 1rem;
  position: absolute;
  top: 0;
  left: 0;
  height: auto;
}

#highlighted-banner {
  background-color: red;
  color: white;
}

.grow-box {
  flex-grow: 1;
}


/*card flip*/
.flip-card {
  perspective: 1000px;
  /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flipped {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front,
.flip-card-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  /* Safari */
  backface-visibility: hidden;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  border-radius: 16px;
  z-index: 1;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: white;
  border: 1px #DDDDDD solid;
  color: black;
}

/* Style the back side */
.flip-card-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}

<nav>
  <p id="nav-name">Logo Here</p>
  <ul>
    <li><a href="">Home</a></li>
    <li><a href="">About</a>
    <li><a href="">Blog</a></li>
    <li><a href="">FAQ</a></li>
  </ul>
  <button id="contact-nav">Contact</button>
</nav>

<div id="card" class="center-container">
  <h1>Displaying flippable cards</h1>
  <div id="card-grid">
    <div class="flip-card style-card hidden">
      <div class="flip-card-inner">
        <div class="flip-card-front">
          <p class="banner" id="highlighted-banner">Put the bottom edge of the blue nav bar half way over this banner to see effect</p>
          <img src=".png">
          <h3>Title</h3>
          <p>Front of Card</p>
          <ul>
            <li>Example 1</li>
            <li>Example 2</li>
            <li>Example 3</li>
            <li>Example 4</li>
            <li>Example 5</li>
            <li>Example 6</li>
            <li>Example 7</li>
            <li>Example 8</li>
          </ul>
          <div class="grow-box"></div>
          <button id="view-more-details-button">View More Details</button>
        </div>
        <div class="flip-card-back">
          <h1>John Doe</h1>
          <p>Architect & Engineer</p>
          <p>We love that guy</p>
          <button id="view-summary-button">View Summary</button>
        </div>
      </div>
    </div>
  </div>
</div>

const flipCards = document.querySelectorAll('.flip-card');
const viewMoreButtons = document.querySelectorAll('#view-more-details-button');
const viewSummaryButtons = document.querySelectorAll('#view-summary-button');

// Loop through the buttons and add event listeners
viewMoreButtons.forEach((button) => {
  button.addEventListener('click', function() {
    // Get the flip-card-inner element that corresponds to the button clicked
    const flipCardInner = button.closest('.flip-card').querySelector('.flip-card-inner');

    // Toggle the 'flipped' class to trigger the flip effect
    flipCardInner.classList.toggle('flipped');
  });
});

viewSummaryButtons.forEach((button) => {
  button.addEventListener('click', function() {
    // Get the flip-card-inner element that corresponds to the button clicked
    const flipCardInner = button.closest('.flip-card').querySelector('.flip-card-inner');

    // Remove the 'flipped' class to trigger the flip effect
    flipCardInner.classList.remove('flipped');
  });
});

html,
body {
  margin: 0 0 200px 0;
  padding: 0;
}

body {
  background: white;
  overflow-x: hidden;
}

/* Nav Bar */

nav {
  font-size: 1.25rem;
  height: 5rem;
  z-index: 999;
  position: sticky;
  top: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: lightblue;
  padding: 0 6rem;
  width: 100vw;
  box-sizing: border-box;
}


#nav-logo {
  height: 40px;
  font-family: "Roboto";
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-grow: 1;
}

nav li {
  display: flex;
  align-items: center;
  padding: 0px 2rem;
}

nav a {
  text-decoration: none;
  transition: 0.2s ease;
}


#nav-name {
  font-size: 36px;
  font-weight: 800;
  font-family: "Roboto";
}

#contact-nav {
  color: white;
  padding: 1.1rem;
}



#card h1 {
  font-size: 3.5rem;
  margin: 4rem 0 4rem 0;
}

.style-card h1 {
  margin-top: 0 !important;
}

#card {
  width: 100vw;
  height: auto;
  background: white;
  margin-bottom: 5rem;
}

#card-grid {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  width: 90vw;
  grid-gap: 1px;
}

.style-card {
  background-color: transparent;
  /*#a2b1bd;*/
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  width: 24%;
  aspect-ratio: 1/1.3;
}


#card h3 {
  margin: 0;
}

#card img {
  background-color: transparent;
  border-radius: 1rem;
  width: 96px;
  height: 96px;
}


.style-card ul {
  list-style-type: "> ";
  width: 60%;
  margin: 0;
}

.style-card li {
  padding: .55rem 0;
}

.style-card button {
  border: none;
  padding: 1rem 0;
  border-radius: 15rem;
  color: white;
  width: 60%;
  font-size: 1.01rem;
  background-color: black;
  transition: 0.2s ease;
}

.style-card button:hover {
  cursor: pointer;
  background-color: #2834b5;
}


.banner {
  width: 100%;
  margin: 0 !important;
  text-align: center;
  font-size: 1.2rem;
  color: white;
  border-radius: 16px 16px 0 0;
  margin: 0;
  padding: .5rem 0;
  margin-bottom: -1.25rem;
  top: 0;
  left: 0;
  z-index: 2;
  background-color: transparent;
  height: 1rem;
  position: absolute;
  top: 0;
  left: 0;
  height: auto;
}

#highlighted-banner {
  background-color: red;
  color: white;
}

.grow-box {
  flex-grow: 1;
}


/*card flip*/
.flip-card {
  perspective: 1000px;
  /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flipped {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front,
.flip-card-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  /* Safari */
  backface-visibility: hidden;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  border-radius: 16px;
  z-index: 1;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: white;
  border: 1px #DDDDDD solid;
  color: black;
}

/* Style the back side */
.flip-card-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}

<nav>
  <p id="nav-name">Logo Here</p>
  <ul>
    <li><a href="">Home</a></li>
    <li><a href="">About</a>
    <li><a href="">Blog</a></li>
    <li><a href="">FAQ</a></li>
  </ul>
  <button id="contact-nav">Contact</button>
</nav>

<div id="card" class="center-container">
  <h1>Displaying flippable cards</h1>
  <div id="card-grid">
    <div class="flip-card style-card hidden">
      <div class="flip-card-inner">
        <div class="flip-card-front">
          <p class="banner" id="highlighted-banner">Put the bottom edge of the blue nav bar half way over this banner to see effect</p>
          <img src="https://em-content.zobj/source/apple/391/high-voltage_26a1.png">
          <h3>Title</h3>
          <p>Front of Card</p>
          <ul>
            <li>Example 1</li>
            <li>Example 2</li>
            <li>Example 3</li>
            <li>Example 4</li>
            <li>Example 5</li>
            <li>Example 6</li>
            <li>Example 7</li>
            <li>Example 8</li>
          </ul>
          <div class="grow-box"></div>
          <button id="view-more-details-button">View More Details</button>
        </div>
        <div class="flip-card-back">
          <h1>John Doe</h1>
          <p>Architect & Engineer</p>
          <p>We love that guy</p>
          <button id="view-summary-button">View Summary</button>
        </div>
      </div>
    </div>
  </div>
</div>

I am trying to implement this Card Flipping effect from W3Schools (https://www.w3schools/howto/howto_css_flip_card.asp) into my current project but I'm only having issues with the transition when the Card is under the Navigation Bar.

If you scroll the blue Navigation Bar so the bottom edge covers the Red Banner of the Card then press the button to start the animation, the top half of both sides of the Card will begin to flicker. If you cover the entire banner or none of the banner with the Navigation Bar then the transition on looks and works fine. Why does this happen and how would I go about fixing this?

• javascript
• html
• css
• css-transforms

• I tried the latest Firefox and Chrome on Windows 11, and only in Chrome there is a slight delayed rendering of the upper edge of the red banner of the card. No real flickering in either browser. Are you perhaps using Safari? – KIKO Software Commented Mar 18 at 18:08
• I'm using Brave on Windows 11; I can have it happen on codepen and my own html file, but not on the code snippet – Skiddswarmik Commented Mar 18 at 18:13
• for the flickering to see in the code snippet you need to see on full screen and make the browser little shorter in height in order to replicate the issue – Jyoti Ahluwalia Commented Mar 18 at 18:35
• @JyotiAhluwalia This seems to be browser-dependent. Which browser/OS are you using? – KIKO Software Commented Mar 18 at 18:38
• Chrome latest version and I could replicate the issue – Jyoti Ahluwalia Commented Mar 18 at 18:40

1 Answer 1

the reason why the flickering occurs is due to use of sticky postion and transform all together

I have updated the code snippet

const flipCards = document.querySelectorAll('.flip-card');
const viewMoreButtons = document.querySelectorAll('#view-more-details-button');
const viewSummaryButtons = document.querySelectorAll('#view-summary-button');

// Loop through the buttons and add event listeners
viewMoreButtons.forEach((button) => {
  button.addEventListener('click', function() {
    // Get the flip-card-inner element that corresponds to the button clicked
    const flipCardInner = button.closest('.flip-card').querySelector('.flip-card-inner');

    // Toggle the 'flipped' class to trigger the flip effect
    flipCardInner.classList.toggle('flipped');
  });
});

viewSummaryButtons.forEach((button) => {
  button.addEventListener('click', function() {
    // Get the flip-card-inner element that corresponds to the button clicked
    const flipCardInner = button.closest('.flip-card').querySelector('.flip-card-inner');

    // Remove the 'flipped' class to trigger the flip effect
    flipCardInner.classList.remove('flipped');
  });
});

html,
body {
  margin: 0 0 200px 0;
  padding: 0;
}

body {
  background: white;
  overflow-x: hidden;
}

/* Nav Bar */

nav {
  font-size: 1.25rem;
  height: 5rem;
  z-index: 999;
  position: sticky;
  top: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: lightblue;
  padding: 0 6rem;
  width: 100vw;
  box-sizing: border-box;
}


#nav-logo {
  height: 40px;
  font-family: "Roboto";
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-grow: 1;
}

nav li {
  display: flex;
  align-items: center;
  padding: 0px 2rem;
}

nav a {
  text-decoration: none;
  transition: 0.2s ease;
}


#nav-name {
  font-size: 36px;
  font-weight: 800;
  font-family: "Roboto";
}

#contact-nav {
  color: white;
  padding: 1.1rem;
}



#card h1 {
  font-size: 3.5rem;
  margin: 4rem 0 4rem 0;
}

.style-card h1 {
  margin-top: 0 !important;
}

#card {
  width: 100vw;
  height: auto;
  background: white;
  margin-bottom: 5rem;
}

#card-grid {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  width: 90vw;
  grid-gap: 1px;
}

.style-card {
  background-color: transparent;
  /*#a2b1bd;*/
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  width: 24%;
  aspect-ratio: 1/1.3;
}


#card h3 {
  margin: 0;
}

#card img {
  background-color: transparent;
  border-radius: 1rem;
  width: 96px;
  height: 96px;
}


.style-card ul {
  list-style-type: "> ";
  width: 60%;
  margin: 0;
}

.style-card li {
  padding: .55rem 0;
}

.style-card button {
  border: none;
  padding: 1rem 0;
  border-radius: 15rem;
  color: white;
  width: 60%;
  font-size: 1.01rem;
  background-color: black;
  transition: 0.2s ease;
}

.style-card button:hover {
  cursor: pointer;
  background-color: #2834b5;
}


.banner {
  width: 100%;
  margin: 0 !important;
  text-align: center;
  font-size: 1.2rem;
  color: white;
  border-radius: 16px 16px 0 0;
  margin: 0;
  padding: .5rem 0;
  margin-bottom: -1.25rem;
  top: 0;
  left: 0;
  z-index: 2;
  background-color: transparent;
  height: 1rem;
  position: absolute;
  top: 0;
  left: 0;
  height: auto;
}

#highlighted-banner {
  background-color: red;
  color: white;
}

.grow-box {
  flex-grow: 1;
}


/*card flip*/
.flip-card {
  perspective: 1000px;
  /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  will-change: transform;
  transform-style: preserve-3d;
  perspective: 1000px;
  transform: translate3d(0, 0, 0);
  z-index: 10;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flipped {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front,
.flip-card-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  /* Safari */
  backface-visibility: hidden;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  border-radius: 16px;
  z-index: 1;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: white;
  border: 1px #DDDDDD solid;
  color: black;
}

/* Style the back side */
.flip-card-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}

<nav>
  <p id="nav-name">Logo Here</p>
  <ul>
    <li><a href="">Home</a></li>
    <li><a href="">About</a>
    <li><a href="">Blog</a></li>
    <li><a href="">FAQ</a></li>
  </ul>
  <button id="contact-nav">Contact</button>
</nav>

<div id="card" class="center-container">
  <h1>Displaying flippable cards</h1>
  <div id="card-grid">
    <div class="flip-card style-card hidden">
      <div class="flip-card-inner">
        <div class="flip-card-front">
          <p class="banner" id="highlighted-banner">Put the bottom edge of the blue nav bar half way over this banner to see effect</p>
          <img src="https://em-content.zobj/source/apple/391/high-voltage_26a1.png">
          <h3>Title</h3>
          <p>Front of Card</p>
          <ul>
            <li>Example 1</li>
            <li>Example 2</li>
            <li>Example 3</li>
            <li>Example 4</li>
            <li>Example 5</li>
            <li>Example 6</li>
            <li>Example 7</li>
            <li>Example 8</li>
          </ul>
          <div class="grow-box"></div>
          <button id="view-more-details-button">View More Details</button>
        </div>
        <div class="flip-card-back">
          <h1>John Doe</h1>
          <p>Architect & Engineer</p>
          <p>We love that guy</p>
          <button id="view-summary-button">View Summary</button>
        </div>
      </div>
    </div>
  </div>
</div>