CODEWITHSUNDEEP
csswordpressgoogle-chrome
Patator
Patator

Reputation: 184

CSS bug only on refresh with chrome

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).

"Blog" and "Qui suis-je" are some pixels too low
(source: ksxav.net)
]

Here is a gif with and without bug :

enter image description here

After searching on google, I tried the following things :

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 :

Upvotes: 3

Views: 801

Answers (1)

Josh Burgess
Josh Burgess

Reputation: 9577

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:

  1. Drop floats

    The a child elements within your li are floated. That's not necessary and I'd recommend removing them.

  1. 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

 <a href="/place/on/my/site">Mes chiennes</a>
 <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.

Upvotes: 1

Related Questions