Seltsames Grenztrübungsverhalten in Webkit?

Question

Ich habe mit Grenzen mit Opazität getestet und Webkit scheint ein seltsames Verhalten zu haben.

Hier ist mein Code

<style> 
div{ 
    position: relative; 
    width: 300px; 
    height: 300px; 
    background: #00f; 
} 
span{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    border: 10px solid rgba(255, 255, 255, 0.5); 
} 
</style> 
<div> 
    <span></span> 
</div> 

Sie können es here testen. In Firefox bekommst du wie erwartet: eine 10px weiße innere Umrandung mit 50% Deckkraft um das div herum, zumindest Chrome (aber ich vermute Webkit) scheint die Grenzen der Grenze zu überlappen (irgendwie macht das Sinn). Und ich denke es ist nicht beabsichtigt, da es sich selbst zu überlappen scheint!

Ist dies ein Fehler oder nur eine beabsichtigte Funktion?

Answer 1

Bug auf der Liste Chrome Probleme (erraten, was, niemand kümmert sich):
http://code.google.com/p/chromium/issues/detail?id=36475&q=transparent%20border%20color&colspec=ID%20Stars%20Pri%20Area%20Feature%20Type%20Status%20Summary%20Modified%20Owner%20Mstone%20OS

einen Blick auf die spec machen, das scheint in der Tat wie ein Bug:
http://www.w3.org/TR/css3-background/#box-shadow-samples

den Beispielen zu , haben eine innere Grenze mit Alpha und zeigen Firefox ähnliches Verhalten.

Answer 2

Das Problem, das Sie haben hier im Detail diskutiert wird:

http://snook.ca/archives/html_and_css/safari-transparent-borders

Wenn Sie den Durchlässigkeitswert der kollidierenden Grenzen nur ein kleines bisschen Sie eine nicht perfekte fix bekommen zu ändern, Hoffnung, das hilft.