CSS Webkit Bug - Redraw Issue?

4
votes

I've created a website which is working fully in FF and IE but has a bug in webkit based browsers, namely Chrome.

The problem is a wrongly drawn <a> element within a "animated" navigation bar (using :hover).

When the page has finished loading in Chrome it looks like this.

But it should look like this.

The funny thing however, is, in the Chrome “Developer Tools” window, if I nudge (e.g. uncheck & check) any attribute of any element, the browser updates to the correct style. It is also fixed if I zoom in and out of the page.

The only similar question I could find was this one. I tried to apply the solution to my problem, but it didn't work. It's important to note that I haven't used any javascript to change styles dynamically as the page loads (as in the question above), its just standard HTML and CSS.

I assume this is a redraw bug in webkit/chrome. Is there any way of fixing this?

1
htmlcssgoogle-chromewebkit
can you give example code? it's hard to test without it :) – marcus erronius
Here is the CSS and here is the HTML. Apologies if I haven't followed the proper way of submitting code on SO, pastebin was the first thing that came to mind. – Chris

1 Answers

1
votes

Not sure if it's technically a bug, but it definitely is strange behavior. You can work around it by by changing this section:

#header_lower  ul li a{
box-sizing: border-box;
-ms-box-sizing: border-box; 
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;

...to use content-box instead of border-box. Unless your layout is heavily dependent on thick borders around those elements and you can't compensate for it, that might be the way to go.