Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

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

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

Problem

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 {
  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?

Problem courtesy of: Wesley Murch

Solution

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.

Solution courtesy of: o.v.

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

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

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×