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.
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:
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.