4

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?

Community
  • 1
  • 1
Chris
  • 123
  • 1
  • 8
  • 1
    can you give example code? it's hard to test without it :) – marcus erronius Dec 20 '12 at 13:17
  • Here is the [CSS](http://pastebin.com/X84xvgDQ) and here is the [HTML](http://pastebin.com/kiUDVxWP). Apologies if I haven't followed the proper way of submitting code on SO, pastebin was the first thing that came to mind. – Chris Dec 20 '12 at 13:29

1 Answers1

1

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.

marcus erronius
  • 3,613
  • 1
  • 16
  • 32
  • That works! Thank you very much for the assistance. Definitely strange behaviour, do you think the error was in my incorrect use of border-boxes, or should border-boxes in theory behave as I originally intended? Thanks again! – Chris Dec 20 '12 at 13:59
  • I suspect they should behave as you intended. I *strongly suspect* a bug, but I don't know enough about it to call it out as one yet :) – marcus erronius Dec 20 '12 at 14:02
  • 1
    less certain about it being a bug now... reduced it down and found that it can also be fixed by making a change to the style in the `#header_lower ul li` selector; changing `padding:10px` to `margin:10px`. It might be that the padding being added inside the border-box-sized block was crowding the words to the "breaking point". – marcus erronius Dec 20 '12 at 14:18