Chrome/WebKit creating a solid bar when using background, border-radius, and top/bottom borders

Question

Google Chrome is acting buggy using border-radius, background color, and top and bottom borders. Here's the evidence and code to reproduce:

http://jsfiddle.net/6ADtd/4/

<div></div>​

div {
  background:blue;
  border-top:10px solid red;
  border-bottom:10px solid red;
  border-radius:20px 20px 0 0;
  height:100px;
  /*
  border-right:1px solid transparent;
  */
}

The border-right:1px solid transparent; is a trick suggested in the comments which did help remove the unwanted middle solid bar, but when you resize the window/browser - it appears again. It has something to do with the proximity of the element to the edge of the browser window, I can't quite understand it. You have to resize then hover over the element sometimes. ​ Videos from my desktop:

• http://www.screenr.com/6wU8 (without border-right)
• http://www.screenr.com/NVU8 (with border-right)

I've tried -webkit- prefixes on several properties and was unable to fix it.

I first posted this because I needed a quick fix for a specific website, but now I'm noticing it show up on several sites and I've nailed down what causes it. That's what I get for not testing in anything but Firefox. This is probably a bug and I should report it, but I'm still stuck in need of a fix in the meantime.

The ideal solution is with CSS, so I can write one or two selectors in the CSS file for the fix instead of digging through loads template files and in the database to apply div-wrap or other markup fixes. Does anyone know any tricks to get rid of this bug?

Answer 1

At the time of me looking into this question, there was still an issue on the prod website visible when the browser is resized to force horizontal scrolling on the document:

The "solution" I used was to apply both

border-left:1px solid transparent;
border-right:1px solid transparent;

to #header with developer tools - this seems to force the issue to go away regardless of resizing, at least on a Mac Chrome 18.

This seems like buggy behaviour to me - I'd speculate it would have something to do with blending corners where colors intersect, which, because of a bug, end up bleeding into the element itself.

I've attempted to, rather fruitlessly, look into the possible connection between a border radius higher than the border width causing this behaviour. This was, of course, untrue - playing around with different x-/y-radii yielded no results without having the "solution" from the above applied. Good to know I guess.

Answer 2

Sorry I was being a bit lazy with my initial reply.

What about wrapping a div with the border properties around the header with overflow hidden: http://jsfiddle.net/jugularkill/Jsdcz/

Answer 3

I've never seen such behaviour in Chrome, very buggy indeed. Anyway, you can get rid of border-bottom and it will work alright. If possible, just add a <div> with background red at the bottom. Something like this:

http://jsfiddle.net/6ADtd/5/

Or a CSS only solution, add content after your div:

http://jsfiddle.net/Cthulhu/6ADtd/6/