Chrome 8.0 / 7.0 Windows border-radius issue

I haven’t found any info regarding this being a bug so I am not sure if maybe I am just not coding this right. I have a single page at http://pixxus.com for which the button labeled “Let’s Talk” appears fine in other browsers (FF 3.6 Windows, Chrome 8.0 Mac) but appears with gray corners around the rounded corners in Chrome 8.0 and 7.0 on Windows. Can someone confirm if those are issues with the browser? Are there any known workarounds or suggestions for this issue?

– EDIT –

I don’t happen to have a Windows machine to test on, but I am relying on Adobe BrowserLab and another friend who had seen the page for seeing the rendered page.

Yep, it’s a bug. You can read some more information (with some suggested fixes) here and the [url=http://code.google.com/p/chromium/issues/detail?id=29427]ticket here which suggests it may have been fixed in the latest webkit

If none of the suggestions in the first link work for you, then the rule that’s causing problems for you is the -webkit-box-shadow rule inside #welcome a (more specifically, the ‘inset’ part of the rule) - if you want to disable it for now

thanks clairs

removing the inset box-shadow does indeed fix the problem, but i really like the effect the shadow creates so i tried the workaround in the stackoverflow thread. i’m not sure if this is the same bug or a different one because giving the element a border with size that matches the blur radius of the inset shadow did not fix this issue for me. i am doubtful that the fix really has been completed as others on the thread have suggested that its a chrome specific issue and not a webkit issue.

if you want to take a look and help me verify that the workaround isn’t working the way it was explained, i’d really appreciate that. i’ll consider trying to file a bug at chromium if i can get a confirmation but since i’m using BrowserLab i’m hesitant to just file one now. ps im using jquery (and a plugin) to browser detect and then assign a new style with the border only if necessary.

actually nevermind, it is the same bug, but the workaround just wasn’t described correctly. its not about matching the blur radius to the size of the border at all. its about covering the corners of the box without the border-radius with the a border large enough. so if you have a large border-radius and are not on a solid background, this is going to look really bad. unfortunately, that is my case.

– UPDATE –

using some basic trigonometry (yeah i just took it there) i figured out that if you want to work around this using the border to cover the escaped shadow, you need to set the border’s thickness to about 41.4% of the border-radius.

So for example:


a {
   border-radius: 10px;
   box-shadow: inset 0px -3px 3px rgba(0, 0, 0, 0.4);
}

a.fix {
   border: 4.2px solid #fff;
}

This would work if your background was approximately white and you could apply the fix class either all the time or just when the affected browsers were detected.

Glad you got it sorted :slight_smile: