Chrome - problem with "width: 0px"

I seem to be having a strange problem in Chrome, with "width: 0px". I am setting the width to 0 to partially hide the link. On mouseover, I am showing a link, with a simple animation. While Firefox and Opera behave nicely, in Chrome I can see the displayed link text even though the width is set to 0 . (in IE and Safari, I can't check right now)

For your convenience, I have added some code in a fiddle, here:

QUESTION: How can I make Chrome display the same as Firefox, only CSS if possible.

NOTE: the menu must respect CSS: "position: fixed, right: 0px".

Any help would be greatly appreciated.



source to share

4 answers

I set the width to 1px instead of 0px. This makes it so that a green background appears and when you hover over it, it expands as expected. I also changed it to 1px in your jQuery.

updated violin



Install links overflow: hidden




You can use css overflow property

overflow: hidden;




overflow: hidden

doesn't work for me, try it display:none

; javascript reads fine.



All Articles