CSS bug only on refresh with chrome - css

Question

I have an ennoying bug with CSS on my new site.
This is a random bug with chrome only. It appears usually at first visit and disappears with a refresh (F5) or a window resize. To make it reappearing, you have to refresh the page (sometimes up to 10 times).
When the bug appears, two links ("Blog" and "Qui suis-je") of the menubar are some pixels too low, and outside of the chrome's computer css boxes (in developpers tools).
(source: ksxav.net)
]
Here is a gif with and without bug :
After searching on google, I tried the following things :
Fixing Varnish for avoiding the 304 bug (bug described here)
I tried to copy all the content of CSS targeted with #import url(css url) into the main CSS file (described here)
Remove all my custom css
I was able to reproduce the bug on 4 differents computers (same Chrome version)
Same results. I also see the same thing on the theme's developper's website (here. Remember, sometimes you have to refresh / close and reopen the tab to view it).
Do someone has an idea? The theme's developper says he can't reproduce the bug, but as I said, I saw it on 4 different computers...
Thank you.
Here are informations :
Chrome 44.0.2403.89, no plugins at all
Wordpress up to date (4.2.3)
Theme up to date

Answer 1

This looks like a vertical alignment issue, but it's probably not. There are a couple things you can do here, though, to try to force the issue:
Drop floats
The a child elements within your li are floated. That's not necessary and I'd recommend removing them.
Fake it
There's no reason you have to rely on the actual document flow to display this where you want it. I'm going to warn you in advance, this one feels icky to write but works like a charm.
On your original a elements
Copy the text of the a to a span, and plop it right next to the other
Example
Mes chiennes
<span>Mes chiennes</span>
Set the following CSS rules:
#nav li {
position: relative;
}
#nav li span {
visibility: hidden;
}
#nav li a {
position: absolute;
display: block;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
This is a little bit of voodoo where we make the span reserve the actual space needed for the word, and then force the element to display perfectly centered within the tab. The transform bit just drags it so the center of the element is at the top and left coordinates you provide, so feel free to play with those to get them where you want them.
Hope that helps.