Font Awesome Icons Showing on Back Card Google Chrome Version 45.0.2454.99 m

[lebiru]

Thank you for the awesome plugin!

I seem to have run into an issue where Font Awesome icons are displaying on the back of cards on Google Chrome.

Here is an example in gif form:

My card looks like this:

<div class="card-grid" style="transform: perspective(600px); position: relative; transform-style: preserve-3d;">
<div class="front" style="height: 100%; width: 100%; backface-visibility: hidden; transform-style: preserve-3d; position: absolute; z-index: 1; transition: all 0.5s ease-out; transform: rotateY(0deg);">
<div class="fa highlightItem fa-4x fa-file-pdf-o" style="backface-visibility: hidden;"></div>
<div class="descTitle" style="backface-visibility: hidden;">PDFs</div>
<div style="backface-visibility: hidden;">Create and send PDFs of completed inspections with ease</div></div>
<div class="back" style="transform: rotateY(-180deg); height: 100%; width: 100%; backface-visibility: hidden; transform-style: preserve-3d; position: absolute; z-index: 0; transition: all 0.5s ease-out;">
<table style="backface-visibility: hidden;">
<tbody style="backface-visibility: hidden;"><tr style="backface-visibility: hidden;">
<td style="text-align: center; padding: 0px 25px 0px 0px; backface-visibility: hidden;">
<div class="fa highlightItem fa-2x fa-file-pdf-o" style="backface-visibility: hidden;"></div>
</td>
<td style="backface-visibility: hidden;">
<ul style="list-style: inherit inside inherit; backface-visibility: hidden;">
<li style="backface-visibility: hidden;">Auto-generated based on completed surveys</li>
<li style="backface-visibility: hidden;">Always reproducible with a click of a button</li>
<li style="backface-visibility: hidden;">Print batches of reports for services easily</li>
</ul>
</td>
</tr>
</tbody></table></div>
</div>

[Download]

Can you do us a favor and try with versions 1.0.14 / 1.0.15 / 1.0.16 ?

There have been some fixes going on that may or may not have caused this.

Cool gif BTW :+1:

[lebiru]

Firefox 41.0

v14

v15

v16

Chrome 45.0.2454.99 m

v14

v15

v16

[lebiru]

This seems to be an issue with Font Awesome, as their class selector .fa has an attribute transform: translate(0,0);. Disabling this field perserves the backface-visibility.

[Download]

Interesting... Thank you for doing the research.

I found these two issues that might be related... Annoying that now it works in Firefox but not in Chrome when it used to be the exact opposite...

Back face always visible on Chrome #39 Font-awesome icons not hidden on firefox #31

[Download]

It seems that for now reverting to v1.0.15 might be a solution for you... I'm hoping we can come up with a fix that works everywhere.

[lebiru]

works for me :+1: thanks!

[Download]

Glad it solves it for you, but really you should not be left stuck on v1.0.15, so re-opening.

[lebiru]

oops, you are right. :sheep:

for what it's worth, I've reverted to v16 and manually inserted transform: inherit on font awesome divs.

So what used to be:

<div class="fa highlightItem fa-2x fa-user"></div>

is now

<div class="fa highlightItem fa-2x fa-user" style="transform: inherit;"></div>

Hope that helps.

[JemarJones]

I'm having trouble reproducing this, could you produce the same thing in something like jsfiddle?

I'm surprised this is an issue again given that the translate(0,0) was removed in fa https://github.com/FortAwesome/Font-Awesome/issues/6023. Are you using the newest version of fa?

[Download]

@lebiru

[lebiru]

http://jsfiddle.net/lebiru/uy6saao2/

I am putting the font awesome icon inside of a table row.

[JemarJones]

@lebiru Okay what i'm able to reproduce from that is the issue appearing specifically when the fa icon is within a table and uses the fa-spin class. fa-spin uses an animation which i suspect is what's causing the issue, not yet sure how that can be dealt with. However, it doesn't look like your original examples had fa-spin and i can't reproduce this issue without the fa-spin class. Would you mind producing a fiddle of this occurring as shown in the original gifs? (Or are those actually somehow using fa-spin?).

[lebiru]

http://jsfiddle.net/lebiru/o7qe0xLw/1/

Sure enough, if I do not use the spinner class, it behaves as expected.

[fembuelita]

I had a similar probably using elements that were floating. They would always show up (in my case, I am flipping over x-axis so the elements would show upside-down as well when they should be hidden). I applied @lebiru's CSS fix from Sept 24, '15 to the problematic elements and it solved it immediately.