CSS3 - Flipping Cards Issue : I have an issue with the flipping cards, the RotationY causes a white space - sometimes - while resizing the browser.

I am stuck for a couple of days searching but I couldn't find a real pure solution for that.

Please keep in mind that I must keep using percentage for the parent div, I mean the same grid style showing in the Fiddle below. 


[![enter image description here][1]][1]


  [1]: https://i.stack.imgur.com/OU6TW.png


      <div id="card" class="flipped">
         <figure class="front">Front</figure>
         <figure class="back">Back</figure>
      </div>


https://jsfiddle.net/z6znny1q/