Fix blurry rounded corners on WebKit

WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=135616
Fixes #732
This commit is contained in:
Thaddee Tyl 2016-12-15 02:09:07 +01:00
parent 036107c30e
commit 78494dd6ff
2 changed files with 6 additions and 6 deletions

View File

@ -4,11 +4,11 @@
<stop offset="1" stop-opacity=".1"/>
</linearGradient>
<mask id="round">
<clipPath id="round">
<rect width="{{=it.widths[0]+it.widths[1]}}" height="20" rx="3" fill="#fff"/>
</mask>
</clipPath>
<g mask="url(#round)">
<g clip-path="url(#round)">
<rect width="{{=it.widths[0]}}" height="20" fill="{{=it.escapeXml(it.colorA||"#555")}}"/>
<rect x="{{=it.widths[0]}}" width="{{=it.widths[1]}}" height="20" fill="{{=it.escapeXml(it.colorB||"#4c1")}}"/>
<rect width="{{=it.widths[0]+it.widths[1]}}" height="20" fill="url(#smooth)"/>

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

@ -6,11 +6,11 @@
<stop offset="1" stop-color="#000" stop-opacity=".5"/>
</linearGradient>
<mask id="round">
<clipPath id="round">
<rect width="{{=it.widths[0]+it.widths[1]}}" height="18" rx="4" fill="#fff"/>
</mask>
</clipPath>
<g mask="url(#round)">
<g clip-path="url(#round)">
<rect width="{{=it.widths[0]}}" height="18" fill="{{=it.escapeXml(it.colorA||"#555")}}"/>
<rect x="{{=it.widths[0]}}" width="{{=it.widths[1]}}" height="18" fill="{{=it.escapeXml(it.colorB||"#4c1")}}"/>
<rect width="{{=it.widths[0]+it.widths[1]}}" height="18" fill="url(#smooth)"/>

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB