Closed
Bug 539289
Opened 15 years ago
Closed 15 years ago
Border transparency bug
Categories
(Core :: CSS Parsing and Computation, defect)
Tracking
()
RESOLVED
DUPLICATE
of bug 538909
People
(Reporter: markg85, Unassigned)
Details
Attachments
(1 file)
|
15.77 KB,
image/png
|
Details |
Image ilustrating the bug
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; nl; rv:1.9.2b5) Gecko/20091204 Firefox/3.6b5 (.NET CLR 3.5.30729)
Build Identifier:
If you make a border transparent like so:
border: 1px solid transparent;
And if that element has a background like so:
background: -moz-linear-gradient(90deg, #7be31d, #c9ff30);
then your resulting render will have a incomplete transparent border.
This is hard to explain so i made a comparison image between firefox 3.6 beta 5 and chromium build 36003. I also made some html and css code to replicate this issue.
Reproducible: Always
Steps to Reproduce:
index.html
------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>testing pure css</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="testbox">
<br />
<div id="progressbar">
</div>
</div>
<div id="container">
</div>
</body>
</html>
style.css
------------
div#testbox
{
width: 500px;
height: 100px;
border: 1px solid #bdbcbd;
-webkit-box-shadow: 0 0 7px #626262;
-moz-box-shadow: 0 0 6px #626262;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
background: -moz-linear-gradient(-90deg, #ffffff, #eaeaea);
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#eaeaea));
position: absolute;
}
div#container
{
border: 2px solid white;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
width: 502px;
height: 102px;
position: absolute;
top: 6px;
left: 6px;
}
div#progressbar
{
margin: 0 auto;
width: 400px;
height: 7px;
border: 1px solid transparent;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-box-shadow: 0 0 11px #000000;
-moz-box-shadow: 0 0 10px #000000;
background: -moz-linear-gradient(90deg, #7be31d, #c9ff30);
background: -webkit-gradient(linear, left top, left bottom, from(#7be31d), to(#c9ff30));
}
Note: the box-shadow is +1 for chrome since that seems to be equal to the firefox/gecko one. Perhaps that's a bug in webkit.
i tried it with:
border: 1px solid transparent !important;
as well but that didn't made a difference.
|
||
Updated•15 years ago
|
Component: General → Style System (CSS)
QA Contact: general → style-system
Version: unspecified → 1.9.2 Branch
Status: UNCONFIRMED → RESOLVED
Closed: 15 years ago
Resolution: --- → DUPLICATE
Thanks for the bug report; looks like philippe beat you to filing this by just 2 days (it's been around quite a bit longer than that).
You need to log in
before you can comment on or make changes to this bug.
Description
•