Flip-Cards: Hrefs not working on inner card?

Hello - I’m using the flip-cards building block for projects in a portfolio. I have two links on the inside of each card, and the hrefs are not working. The flip animation works fine, and the simple link code below works fine IF I paste it somewhere else in my html, however no href links work on the inner-flip-card.

**<a href="https://github.com/JenJayme/lisas-pampered-paws" class="button float-left" target="_blank">Repo</a>**

I checked Stack Overflow and it seems a few people have run into similar problems but didn’t find a solid answer. The links on the building block page don’t work either. Also, I added an event listener to console.log a message on button click, but the button click never registers on the inner card.

Anyone have suggestions to fix?

The code is on lines 287-288 here

After no answers to this question on Stack Overflow or Foundation Forum, I continued to poke around and found the solution in another question here. Posting in case this helps someone else someday.

The problem is a glitch related to the card rotation and the webkit-transform line in the css. Here’s the fix that worked for me:

In CSS, translate both front and back just a little bit and they won’t overlap.


.element .front {
    -webkit-transform: translateZ(1px);

.element .back {
    -webkit-transform: rotateY(180deg) translateZ(1px);

Per a related comment, “the key is to only apply the translateZ to the card that you’ve just flipped to the back and only when it’s flipped. That way you won’t be affected by the fuzzy rendering that the translateZ would otherwise cause.”