Closed Bug 539289 Opened 15 years ago Closed 15 years ago

Border transparency bug

Categories

(Core :: CSS Parsing and Computation, defect)

Product:
Core
Component:
CSS Parsing and Computation
Version:
1.9.2 Branch
Platform:
x86_64
Windows 7
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED DUPLICATE of bug 538909

People

(Reporter: markg85, Unassigned)

Details

Attachments

(1 file)

Image ilustrating the bug
15.77 KB, image/png
Details 
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.
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).

    
    

    
  
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.
        






  

    
  







  

    

      
Attachment

      

      
      
      
      
    

    

      

        

          

            
General

            

              Creator: 



            

            
Created: 

            
Updated: 

            
Size: