Status

()

Core
CSS Parsing and Computation
RESOLVED DUPLICATE of bug 538909
9 years ago
9 years ago

People

(Reporter: Mark, Unassigned)

Tracking

1.9.2 Branch
x86_64
Windows 7
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

(Reporter)

Description

9 years ago
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.
(Reporter)

Comment 1

9 years ago
Created attachment 421304 [details]
Image ilustrating the bug
Component: General → Style System (CSS)
QA Contact: general → style-system
Version: unspecified → 1.9.2 Branch
Status: UNCONFIRMED → RESOLVED
Last Resolved: 9 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 538909
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).
(Reporter)

Comment 4

9 years ago
Oh, i searched for it but couldn't find it..
You need to log in before you can comment on or make changes to this bug.