Chrome 17.0.963.46 – border bug

Screenshot demo.html

The newest version of Chrome (17.0.963.46) is a bit of a trouble maker – at least on Windows 7 x64. Seems like the border-radius property causes a bug, which fills the background of the element with its borders color – not entirely, but partly at a height of height x ~0,50-0,52.

Deactivating the border-radius seems to “fix” it, and scrolling has also some effects on it.

demo
demo2
demo3


[code lang=”html” title=”Sourcecode demo.html”]
<html>
<head>
<title>chrome 17 bug</title>
<style>
body{height: 1500px;}
#foo{
background: #ccc;
border-bottom: 5px solid blue;
border-radius: 2px;
height: 300px;
width: 200px;
}
</style>
</head>
<body>

<div id="foo">
this</br>
is</br>
not</br>
cool</br>
,</br>
google</br>
</div>

</body>
</html>
[/code]


Update 09.02.2012 14:48

Same story on Windows XP x32.


Update 10.02.2012 10:51

The bug seems to be related to the width of the border and the border-radius. Changing these values produces even weirder display errors. If the border-radius is bigger than the border-width, the background isn’t affected anymore, instead a border-left/-right appears (demo4) up to the same height as the background earlier.

The combination of border-top and border-bottom produces a similar problem (demo5), the top border fills up the other part of the element. If the border-radius value is higher than the border-width, the same effect as above occurs (demo6).

The bug doesn’t appear, if a border-left/-right is added to the element.


Update 15.02.2012 11:01

In the meantime, I added my report to an existing issue #113368 on Google Code. Additionally, there’s another issue (#113726) report (thanks Dave). Since issue #113726 seems more active, I’d suggest to file future experiences there.


Update 19.02.2012 14:57

The update to 17.0.963.56 stable from Wednesday, Feb. 15th had no impact on this bug.


Update 02.03.2012 08:49

Since nobody seems to care about this bug at Google/Chromium, i had to figure out a workaround – quick and dirty. Not the best solution though, but at least the websites don’t look too fucked up:

[code lang=”javascript” title=”JavaScript Snippet”]
var browser = navigator.userAgent;
var buggyVersions = [‘Chrome/17.0.963.46’, ‘Chrome/17.0.963.56’, …];
for(var version in buggyVersions){
if(browser.indexOf(buggyVersions[version]) !== -1){
document.getElementsByTagName(‘html’)[0].className +=’ buggy-chrome’;
break;
}
}
[/code]

[code lang=”css” title=”CSS Snippet”]
.buggy-chrome .messedUpElement{
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
[/code]


Update 07.03.2012 16:40

I just updated to Chrome 17.0.963.66 stable, still no bugfix.


Update 16.04.2012 08:55

Wow.. looks like in 18.0.1025.162 the bug has been fixed.

9 Replies to “Chrome 17.0.963.46 – border bug”

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.