javascripthtmlcsscss-transforms

DIV flickering during transition when under Navigation Bar

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.net/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.com/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?

Solution

  • 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.net/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>