Note that there are some explanatory texts on larger screens.

plurals
  1. POSafari in OS X – weird bug with border-radius
    primarykey
    data
    text
    <p>I'm experiencing some really strange problems with border radius in Safari for Mac OS X. Take a look at this jsFiddle: <a href="http://jsfiddle.net/sXxtU/1/" rel="nofollow noreferrer">http://jsfiddle.net/sXxtU/1/</a></p> <p><strong>Safari Mac OS X:</strong><br> <img src="https://i.stack.imgur.com/L0SoR.png" alt="enter image description here"><br> (Top left corner, and the white vertical line)</p> <p><strong>Chrome Mac OS X:</strong><br> <img src="https://i.stack.imgur.com/He3jY.png" alt="enter image description here"><br> (Perfectly fine)</p> <p><strong>Safari iOS 6.0</strong><br> <img src="https://i.stack.imgur.com/eTJHz.png" alt="enter image description here"><br> (Also perfectly fine).</p> <p>Now, in this example I am using <code>border-radius: 5px 5px 0 0;</code>, i.e. only applying it on the top corners. However, if I chose to round all the corners – I get this (in Safari for OS X):</p> <p><img src="https://i.stack.imgur.com/xn699.png" alt="enter image description here"> </p> <p>Is this a known bug? Is there some way to remedy this? I'm guessing that it is due to some clipping issues, but no matter how I try to apply different fixes – I can't get it to look quite right.</p> <p><strong>Edit</strong><br> I should point out that this is in Safari 6.0.2. haven't got the chance to test other versions just yet.</p> <p><strong>Edit 2</strong><br> Tried adding <code>border: 1px solid transparent;</code> and it looks much better. However, if I go with a border color (like #fff) I still get some clipping problems (now in the top right corner...?). Still very interested in learning what's going on here.</p> <p><strong>Edit 3</strong><br> User Sparky pointed out that my HTML is invalid (having a div-element inside a ul-element) – however, I have confirmed that this have nothing to do with the issues I am having.</p> <p><strong>Edit 4</strong><br> Been testing Safari 6.0.2 some older versions of OS X, and this issue only seems to occur in 10.8.2. Very strange.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload