translate(0, 0) kills z-index

[mentor2k1]

The facebook icon should be lay under the red div:

http://jsfiddle.net/ovab9gL5/8/

there is an thread on stackoverflow: http://stackoverflow.com/questions/5472802/css-z-index-lost-after-webkit-transform-translate3d , but this doesn´t solve the problem

[davegandy]

This is interesting. The translate(0,0) helps out with Firefox rendering, but it's not so important if it's breaking z-index.

@tagliala What do you think here?

[tagliala]

I would remove that rule and preserve z-index

[tagliala]

Also see #6142

[gameguy43]

We just experienced this issue on our website as well.

We have social buttons in the footer. We also have a "notepad" that slides up from the bottom of the page, as an "overlay". The font-awesome icons from the footer appear /on top/ of the overlay, even though they have a lower z-index.

So I'd vote with @tagliala on this.

For now, we're patching this in our master CSS file like so:
.fa{
transform: none !important;
}

[guibirow]

I'm with the same problem, I had to fix as @gameguy43 described.

My doubt is.
Why do I need the transform?
I couldn't notice any difference!

[tagliala]

@guibirow
#6023 (comment)

I can confirm there is a difference

[guibirow]

Sorry, But this doesn't answer my question.
the post above said it will improve firefox rendering, but I removed and checked everywhere, there is no difference into design,
Just to be clear, the small difference I could notice is icon inside H2 tag, about 1px difference, nothing else different.
I'm using ff 39, maybe it only applies to some ff version.

[tagliala]

FF 39, windows 7. There is definitely a difference

[Download]

Sorry if this is lame, but can you spell it out for me? I truly see no difference.

[tagliala]

credit-card and envelope-o at 800% zoom, no antialiasing.

light vertical lines with transform (left side) are far better. On the right side they are blurred

[Download]

Ok. Subtle! Weird that it would make such a difference. Thank you for showing it.

[tagliala]

you're welcome! btw the z-index is more important so this rule will be probably removed

[guibirow]

Now I see a light difference, but users doesn't care about this.
We see it everyday and hardly can notice any difference,
I'm sure nobody will zoom at that point.
Thanks to spend your time too explain.

[tagliala]

@guibirow I can clearly spot the difference at 100%. 😕

[guibirow]

Sorry, but I'm sure if you show the icon without transform to a regular person, and ask whats wrong, nobody will notice anything.
You can notice because you are used to handle it every day, I see the icons every day, after I removed I couldn't see any difference if you didn't tell.
it's that kind of thing you never notice, after the first time you can't forget even after fixed.

[tagliala]

The problem is that we just need to provide icons, and we want to provide icons at the best we can. If a transform is needed to make vertical lines crisper, then we should use it.

But... if the before mentioned transform breaks z-index, I would definitely remove that rule :) #6023 (comment)

[davegandy]

This is a really sad one for me to lose. I thought I had Firefox rendering finally down.

Any other things we can try to see about getting that pixel perfection back in Firefox?

[davegandy]

Removed translate() from 4.4.0-wip branch. Closing...

[joshperry]

I was unintentionally relying on this bug for proper z-index stacking of a kebab menu icon. Ooops, that was a fun bug to track down.

[34r7h]

Revisting this issue. I have a use case where user behaviour dictates the size of button icons and transform is the best css method to scale without breaking layout. Has anyone at FA figured looked into this since?