Text becomes very slightly blurry after applying z-index in Chrome

I have elements with text on page. I have noticed that text is actually very slightly blurry in Chrome in comparison to Firefox. When I removed z-index from the element text becomes sharper. How can I make text sharp without removing z-indexes.

Here is an HTML code:

<div class="navigation navigation-fixed">
    <div class="navigation-infouser">
    <a href="/bohdan.andriyiv"><span>Bohdan Andriyiv</span></a>
    </div>
</div>

and here is CSS for this div:

.navigation-fixed {
    position: fixed;
    top: 52px;
    z-index: 11; //when removed text becomes sharper