Clever Geek Handbook

CSS error only when updating with chrome

I have an annoying CSS error on my new site . This is a random bug with chrome only . It usually appears on first visit and disappears with refresh (F5) or window resize . To make it appear again, you need to refresh the page (sometimes up to 10 times).

When an error occurs, two links ("Blog" and "Qui suis-je") in the menu bar are a few pixels too low and outside of the chrome CSS computer blocks (in developer tools).

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

Here is an image with and without error:

enter image description here

After searching on Google, I tried the following:

  • Varnish fix to prevent error 304 (bug described here )
  • I was trying to copy all targeting CSS content @import url(css url)

    into the main CSS file (described here )
  • Remove all my own CSS
  • I was able to reproduce the error on 4 different computers (same Chrome version)

Same results. I also see the same on the theme developer website ( here . Remember that sometimes you have to refresh / close and reopen a tab to view it).

Anyone have an idea? The theme developer says he cannot reproduce the bug, but as I said, I saw it on 4 different computers ...

Thank.

Here's the info:

  • Chrome 44.0.2403.89, no plugins at all
  • Wordpress up to date (4.2.3)
  • The topic is relevant
+3


source to share


1 answer


This looks like a vertical alignment problem, but probably not. However, there are a few things you can do here to try and force the problem:

  • Falling float

    The children a

    in your li

    . These are not required and I would recommend removing them.

  1. Fake

    There is no reason why you have to rely on the actual document flow to display it where you want it. I'm going to warn you ahead of time, it sounds annoying to write, but it works like a charm.

On the original a

elements

  • Copy the text a

    to the range and flip it next to another

    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 bit of voodoo where we make a margin of space with the actual space needed for the word and then make the element appear perfectly centered in the tab. Bit transform

    just drags it around so that the center of the element is in the coordinates top

    and left

    which you provide, so feel free to play with them to get them where you want them.

Hope it helps.

+1


source






More articles:


All Articles