Chrome по-разному отображает CSS в интерактивном режиме и в автономном режиме?

У меня проблема с Chrome, который нормально отображает мою страницу при локальной загрузке, но что-то идет не так, когда страница находится в сети. Первое, что я сделал, это проверил Safari, потому что они оба используют один и тот же движок рендеринга. Safari отлично отображает мою страницу.

Если щелкнуть ссылку на странице и нажать кнопку «Назад», страница также загрузится нормально.

Вот изображение, показывающее, как страница загружается локально в Chrome:

И здесь заголовок сдвигается вниз, когда страница находится в сети:

Вот соответствующий html:

    

        
        

            
Features
            
Pricing
            
Sign UpLog In
            

        
    

И CSS:

#header2 {
position: relative;
z-index: 999;
height: 40px;
width: 100%;
background: #000;
box-shadow: 0em 0em 0.5em #000;
        -webkit-box-shadow: 0em 0em 0.5em #000; /* safari */
/* header nav type */
font-family: "Varela Round", Helvetica, Arial, sans-serif;
font-size: 15px;
}

#header2 ul {
float: right;
list-style-type: none;
}

#header2 li {
display: block;
float: left;
height: 32px;
margin: 10px 16px 0;
}
/* sign up/log in button */
#header2 li.blue {
  background: url('../images/detailpages/login.png');
  width: 170px;
  height: 40px;
  margin: 0;
}
#header2 li.blue a {
    display: block;
    float: left;
    margin: 10px 3px 0 24px;
}
#header2 input {
  height: 22px;
  width: 220px;
  padding: 0 8px;
  font-family:  "Varela Round", Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #333;
}
#header2 form img {
  display: block;
  float: right;
  padding-left: 5px;
}

У этого парня была та же проблема, но не похоже, что есть решение: Отрисовка CSS в Chrome в интерактивном режиме отличается от оффлайн