Font-awesome icons not hidden on firefox

[Seb33300]

Hello,

I think it could be a firefox bug: when using font awesome icon in the front div, the icon still be visible when the div is flipped if background is transparent.

[Download]

Can you create a JS Fiddle of it maybe?

[Seb33300]

https://jsfiddle.net/g3dsksm5/

[Download]

Thank you! Very clear example

[Download]

I notice that Font Awesome adds this style rule:

transform: translate(0px, 0px);

(to see it, Inspect Element on the little bug icon)
If I remove it then the issue disappears.
It's a bit of a strange style rule wouldn't you say?

I wonder if this is an issue with Flip or with Font Awesome? That rule looks like it's a fix for something... Why else would they translate(0px, 0px)? This should normally have no effect whatsoever I think...

As I understand you are running into this issue I would like to ask you to see if the people from Font Awesome have something to say about this? I'm willing to (help you) fix this in Flip but I don't really feel like adding Font Awesome specific styling rules to Flip....

[Download]

See this fixed version of the fiddle

[Seb33300]

I think it's a firefox bug. Others browsers do not have this issue.
And it's the container div which is flipped, not the icon.

[Download]

Yes this could well be.

So what do you propose going forward?

[JemarJones]

Indeed this is some unusual styling from fa, but i played around a little bit and all we have to do is apply the following style to prevent any weird code like this causing this issue:

    .back > *, .front > *{
        backface-visibility: hidden;
    }

see the updated fiddle here.

Of course we should do this with our jQuery rather than hardcoding selectors, but that's the idea.

This way we can prevent any unusual styling such as this and don't have to hardcode a fa specific exception.

[JemarJones]

So fa has confirmed that this is an issue of theirs and will be fixed in the next release FortAwesome/Font-Awesome@0810752#commitcomment-12221926. Still, I'm not sure what sort of issues not hiding the backface of all children elements might cause in the future. So I'm not opposed to adding this fix so long as it doesn't somehow cause problems itself.

[Seb33300]

Why is this plugin not hiding (display: none) the hidden block instead of just change backface-visibility to hidden?

[JemarJones]

It's cleaner and the same thing can be achieved if used correctly.

[Download]

@Seb33300 Actually, using display:none is harder than you might think. The element becomes visible during the flip animation... So you would have to toggle display:none on and off halfway the animation.

The advantage of backface-visibility: hidden is that the 3D engine handles it. And that 'knows' exactly when the face becomes visible.

[JemarJones]

@Download So do you agree with adding my change?

[Download]

@JemarJones Sorry for the late response. Yes I think you found a good generic solution.

[Seb33300]

I can reproduce a similar problem which only occurs on Google Chrome while adding this plugin in flip divs: http://tympanus.net/Development/ResponsiveMultiLevelMenu/

CSS code given by @JemarJones also solve this bug on Google Chrome.

But how will you add it automatically? Will you take into account that front/back selectors can be changed?

[JemarJones]

Yes it seems that they've got some conflicting transforms in there as well. Does that plugin behave as expected? I'd imagine that plugin wouldn't work too well inside of a flipped element in general?

We'll just use some JavaScript, you can take a look at that last commit that referenced this above. I'll update the release with this fix later today most likely.

[Seb33300]

I have no other problem using this inside a flipped element except some flipped element which still visible when on their back side. But solved with your CSS

[JemarJones]

Hmm okay, that's interesting.

[JemarJones]

This is now in the release.

[Download]

The Font Awesome bug has also been fixed:
FortAwesome/Font-Awesome#6023