Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Font-awesome icons not hidden on firefox #31

Closed
Seb33300 opened this issue Jul 16, 2015 · 20 comments
Closed

Font-awesome icons not hidden on firefox #31

Seb33300 opened this issue Jul 16, 2015 · 20 comments

Comments

@Seb33300
Copy link

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
Copy link
Collaborator

Can you create a JS Fiddle of it maybe?

@Seb33300
Copy link
Author

@Download
Copy link
Collaborator

Thank you! Very clear example

@Download
Copy link
Collaborator

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
Copy link
Collaborator

@Seb33300
Copy link
Author

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
Copy link
Collaborator

Yes this could well be.

So what do you propose going forward?

@JemarJones
Copy link
Collaborator

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
Copy link
Collaborator

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
Copy link
Author

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

@JemarJones
Copy link
Collaborator

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

@Download
Copy link
Collaborator

@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
Copy link
Collaborator

@Download So do you agree with adding my change?

@Download
Copy link
Collaborator

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

@Seb33300
Copy link
Author

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
Copy link
Collaborator

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
Copy link
Author

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
Copy link
Collaborator

Hmm okay, that's interesting.

@JemarJones
Copy link
Collaborator

This is now in the release.

@Download
Copy link
Collaborator

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants