css - CSS3 border radius problem with Chrome, Opera, Safari -


i ran problem when trying add rounded corners divs , can't seem find solution. i'm using css class assigned divs:

-moz-box-shadow: 0px 5px 5px #cccccc; -webkit-box-shadow: 0px 5px 5px #cccccc; box-shadow: 0px 5px 5px #cccccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; 

the following how shows in chrome, safari , opera:

chrome, opera, safari output

and here how displays in firefox , ie9:

firefox, ie9 output

it looks if background in chrome , others somehow clip on the background color in top border. css associated colored top border is:

border-top:8px solid #333333; 

any ideas?

check fiddle in various browsers:

http://jsfiddle.net/qvs9x/

when remove border-radius, goes normal. may have discovered bug in webkit , opera implementations of border-radius. check if hasn't been reported , if not, might want report :).

[edit]

i'm quite bug.

  1. it manifests in chrome & opera
  2. the bug looks different in chrome , opera
  3. the buggy part related width of border exceeds value of border-radius (ie, border-radius:10px , border width 10px, it's fine)
  4. the correctly rendered part wide value of border-radius.

i'm positive should reported both opera , webkit teams.


Comments

Popular posts from this blog

c# - how to write client side events functions for the combobox items -

exception - Python, pyPdf OCR error: pyPdf.utils.PdfReadError: EOF marker not found -