Nav bar is broken in Chrome not in IE or Firefox

364 views Asked by At

The navigation bar was working fine till today. It is breaking in Chrome. But sometimes after few refreshing, it works fine. It's like 1 in 10. It's just happening. It's magento 1.9.2. Chrome version is 43.0.1

The text of the nav bar is uppercase and bold when it works.

.novaworks-navigation #novaworks-nav > li.level0 > a > span {
  line-height: 50px;
  text-transform: uppercase;
  font-weight: bold;
}

But when it is not working, during element inspection, nothing such as these rules shows up. There are some user agent style-sheet is showing up. And the text is also not uppercase or not even bold.

i, cite, em, var, address, dfn {
  font-style: italic;
}

Also the search box at right has a magnifier icon. But now it is also not showing up. The class for font-awesome shows no rules apart from font-style. It says User Agent Stylesheet.

But when it works, the rule for font-awesome search bar is:

.fa {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

1

There are 1 answers

0
Shubham Sharma On

The trouble was due to animate.css. It might be little incompatible with the latest version of Chrome 43.0.1.

You have to put the general animation rule after the browser specific ones:

-webkit-animation: aia2 5s linear infinite alternate;
   -moz-animation: aia2 5s linear infinite alternate;
    -ms-animation: aia2 5s linear infinite alternate;
     -o-animation: aia2 5s linear infinite alternate;
        animation: aia2 5s linear infinite alternate; /* this comes last */

Thanks. I hope it helps.