Closed Bug 644104 Opened 13 years ago Closed 1 year ago

grey line when color and transparency connect on border


(Core :: Graphics, defect, P3)

2.0 Branch
Windows Vista





(Reporter: nicolasgallagher, Unassigned)




(Keywords: regression, testcase, Whiteboard: [gfx-noted])


(3 files)

User-Agent:       Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_6; en-US) AppleWebKit/534.16 (KHTML, like Gecko) Chrome/10.0.648.151 Safari/534.16
Build Identifier: 4.0

Adding borders to one or two sides of an element (or pseudo-element) seems to result in a shadow being rendered along the 'internal edge' of the border.

When the element has very small width/height dimensions, but a large border on one or two sides, the border can form a triangle or trapezoid. In Firefox 4.0, the diagonals of this border have a shadow along them. This shadow varies in size based on the border values.

The expected appearance would be 'shadow free'.

Reproducible: Always

Steps to Reproduce:
1. Set block-level element to have no width or height.
2. Add a large left/right border and a smaller top/bottom border. Set the left border to a colour, the others to transparent.
Actual Results:  
Created a triangle-shaped border, but this border is rendered with a shadow along the diagonals that point in towards the point at which each border-side merges.

Expected Results:  
No shadow rendered around the border.
Can you provide/attach a reduced Testcase showing the Issue to this Report using ?
Component: General → Layout
Product: Firefox → Core
QA Contact: general → layout
Version: unspecified → Trunk
I'm not seeing a shadow on my mac here (just an antialiased diagonal line).

Nicolas, can you attach a screenshot of what you see?
I also had conflicting reports on Twitter about this showing in Windows 7. Some users reported it, others denied it.
Oh, you see this on Windows?  Comment 0's UA was on Mac... 

Do you still see this if you disable hardware acceleration in preferences?
The bug report says Windows Vista but I submitted it from a Mac!

I still see this if hardware acceleration is disabled.
All on WinXP with Trunk (without HWA), GC 12, Opera 11 (left-to-right).
Aha.  So I see this on Linux, but not on Mac.  Sounds like most likely a bug in cairo or the way we use it for border drawing.  Bas, can you take a look?
Component: Layout → Graphics
Ever confirmed: true
QA Contact: layout → thebes
Keywords: regression, testcase
This works with Firefox 3.6
On my laptop I have two modes High-performance GPU (ATI)/when plugged/ and Power-saving GPU (Intel)/on battery/

I dont see the grey line which connects with transparent color when Im using the ATI GPU and hardware acceleration is enabled.

If I disable hardware acceleration, the grey line appears.
When switch to Intel graphics it appears too no matter if hardware acceleration is enabled or not.

Here are my display drivers:

ATI Mobility HD 5650

Driver Packaging Version	8.752-100629a-102175C-Acer	
Provider	ATI Technologies Inc.	
2D Driver Version	
Direct3D Version	
OpenGL Version	
Catalyst™ Control Center Version	2010.0629.2222.38338

Intel® HD Graphics (Core i5)

Driver Version:
Operating System:		Windows 7  (6.1.7600)
DirectX* Version:		10.0
Processor:			Intel64 Family 6 Model 37 Stepping 2
Vendor ID:			8086
Device ID:			0046
Device Revision:		12	

I have DirectX 11 installed no idea why Intel says 10...
Summary: css single-side borders render with 'shadows' on objects with small dimensions → grey line when color and transparency connect on border
So looks like hardware acceleration is disabled when Intel HD graphics are used. I downloaded latest drivers for both video cards and nothing changed.

With Internet Explorer 9 hardware acceleration works with both...
Regression Range : 
Mozilla/5.0 (Windows NT 6.1; rv:2.0b8pre) Gecko/20101202 Firefox/4.0b8pre
Mozilla/5.0 (Windows NT 6.1; rv:2.0b8pre) Gecko/20101203 Firefox/4.0b8pre
Probably a regression from bug 588271, then.

Bas, can you please take a look?
Blocks: 588271
(In reply to comment #13)
> Probably a regression from bug 588271, then.
> Bas, can you please take a look?

I will have a look, I should note this looks fine on Direct2D. Presumably this is a bug in cairo's gradient rendering but I'd be surprised if Quartz also had it then. This should be a simple hard gradient stop but maybe I overlooked something.
Quartz doesn't have this bug.  This bug appears on Windows with no d2d and on Linux, but not on d2d or Mac.
Same problem here. Both on Windows 2008 Server, as well as Windows 2003 Server.
Blocks: 734748
(In reply to Boris Zbarsky (:bz) [In and out Aug 1 - 10, out Aug 11-20] from comment #15)
> Quartz doesn't have this bug.  This bug appears on Windows with no d2d and
> on Linux, but not on d2d or Mac.

I can reproduce this bug using the testcase with D2D acceleration on Nightly.
(In reply to John Volikas from comment #17)
> I can reproduce this bug using the testcase with D2D acceleration on Nightly.

Yes, as it seems Azure "regressed" this when using D2D since with;false it's okay.
Blocks: 646053
Still an issue on FF 25.0a1 (2013-07-16), NVIDIA GeForce 8400 GS, HWA off
I was linked here from reports of Firefox's "CSS Triangle" issues... I've narrowed those down on my machine (Core 2 Duo E6600, Nvidia GeForce 660 Ti) to the Anisotropic filtering setting in the Nvidia Control Panel. I suspect the Anisotropic filtering for other display solutions (AMD, Intel) might be similarly responsible.

With Anisotropic filtering OFF, this bug does not occur. With it ON, either globally or specifically for Firefox, this bug crops up.

Hope that helps.
Blocks: 1081148
Does this still reproduce?
Flags: needinfo?(nicolasgallagher)
Whiteboard: [gfx-noted]
Version: Trunk → 2.0 Branch
No, it does not. The issue is gone.
Severity: normal → S3
No longer blocks: 734748
Duplicate of this bug: 734748

Unable to reproduce in recent versions.

Closed: 1 year ago
Flags: needinfo?(nicolasgallagher)
Resolution: --- → WORKSFORME
You need to log in before you can comment on or make changes to this bug.