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

translate(0, 0) kills z-index #6023

Closed
mentor2k1 opened this issue Mar 20, 2015 · 20 comments
Closed

translate(0, 0) kills z-index #6023

mentor2k1 opened this issue Mar 20, 2015 · 20 comments
Milestone

Comments

@mentor2k1
Copy link

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

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?

@davegandy davegandy added this to the 4.3.1 milestone Mar 20, 2015
@tagliala
Copy link
Member

I would remove that rule and preserve z-index

@tagliala
Copy link
Member

tagliala commented Apr 2, 2015

Also see #6142

@gameguy43
Copy link

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

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

@guibirow
#6023 (comment)

I can confirm there is a difference

@guibirow
Copy link

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

image

FF 39, windows 7. There is definitely a difference

@Download
Copy link

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

@tagliala
Copy link
Member

image

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

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

@tagliala
Copy link
Member

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

@guibirow
Copy link

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

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

@guibirow
Copy link

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

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

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

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

@joshperry
Copy link

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.

niklaushug pushed a commit to tocco/tocco-client that referenced this issue Feb 15, 2018
@34r7h
Copy link

34r7h commented Jan 13, 2019

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?

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

No branches or pull requests

8 participants