Border Flash на расширении Foundation Card

Question

Я добавляю двустороннюю возможность к элементу карты Foundation 6.4. Базовый CSS прекрасно работает, и я доволен результатом.

body { // Our container
  background-color: #ccc;
}

.card { // Stuff usually done in the grid
  margin: 1rem;
  width: 300px;
  height: 400px;  
}

// Foundation 6 card extension begins here!
.card {
  background-color: transparent;
  border: none;
  overflow: visible;
  perspective: 1000px;

  .faces {
    height: 100%;
    position: relative;
    transition: transform 0.5s;
    transform-style: preserve-3d;
    width: 100%;
    &.flipped {
      transform: rotateY(180deg);
    }
    .front,
    .back {
      backface-visibility: hidden;      
      background-color: white;
      height: 100%;
      overflow: hidden;
      position: absolute;
      width: 100%;
    }
    .front {
      transform: rotateY(0deg);
    }
    .back {
      transform: rotateY(180deg);
    }

    .card-flipper {
      background-color: transparent;
      bottom: 0;
      color: green;
      display: block;
      height: 40px;
      position: absolute;
      right: 0;
      width: 40px;
    }
  }
}

Пожалуйста, смотрите https://codepen.io/marksellers/pen/wraxoo

Когда я добавляю некоторые производственные стили, я замечаю вспышку границы в нижнем правом углу, вероятно, связанную с псевдоэлементами, которые используются для обеспечения угла переворачиваемой страницы.

.card {
  height: 300px;
  .faces {
    .front,
    .back {
      .card-flipper {
        z-index: 3;
      }
    }
    .back {
      .social {
        font-size: 2rem;
        margin-top: 1rem;
        li a {
          padding: 0 0.5rem;
        }
      }
    }
    .front:before,
    .back:before {
      border-style: solid;
      border-width: 20px 20px;
      border-color: white $background-color $background-color white;
      box-shadow: -5px -5px 7px lightgray;
      content: "";
      display: block;
      position: absolute;
      bottom: 0;
      right: 0;
      z-index: 1;
    }
    .front:after,
    .back:after {
      color: green;
      content: "flip";
      display: block;
      height: 0px;
      position: absolute;
      bottom: 29px;
      width: 0px;
      right: 42px;
      z-index: 2;
      transform: rotate(-45deg);
    }
  }
}

Пожалуйста, смотрите https://codepen.io/marksellers/pen/NaRyLM

Есть идеи по поводу этого и возможных исправлений? Это было проверено только в Firefox. Я не знаю, возникает ли проблема в других браузерах.