dark diagonals at corner joins adjacent to transparent borders

RESOLVED WORKSFORME

Status

()

Core
Graphics
RESOLVED WORKSFORME
6 years ago
6 months ago

People

(Reporter: Kumar Harsh, Unassigned)

Tracking

(Depends on: 1 bug, {regression, testcase})

Trunk
x86
All
regression, testcase
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [Workaround see comment 25][Windows and Linux only, may be caused by the Cairo Path Tesselator and Rasterizer], URL)

Attachments

(2 attachments)

231 bytes, text/html
Details
218 bytes, text/html
Details
(Reporter)

Description

6 years ago
User-Agent:       Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.0) Gecko/20100101 Firefox/4.0
Build Identifier: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.0) Gecko/20100101 Firefox/4.0

On some machines, the code given in the URL field (http://jsfiddle.net/rv3DZ/4/) adds a gray border along the edge of the normal border.

Other browsers such as Google Chrome, Safari, and even IE8 render the code perfectly. Also, on some machines, this code is rendered perfectly even on Firefox, but not on others. 
Even a clean install of ff4.0 does not resolve the issue, nor does starting it in a safe mode.

Currently, this bug can be circumvented by using the -moz-border-*-colors attribute and setting its value to, say transparent (in the example).

Reproducible: Always

Steps to Reproduce:
1. Go to the URL specified to get an example code.
2. Click on update button to get the rendering.
Actual Results:  
A thin (1px) gray border surrounding the normal coloured border

Expected Results:  
There should be no gray border at all.

The bug occurs, even after disabling all the addons.
The bug occurs on some machines, but not on all the machines.
(Reporter)

Updated

6 years ago
(Reporter)

Comment 1

6 years ago
Pls use this URL for getting the code in question :

http://jsfiddle.net/sigmabetatooth/rv3DZ/6/

Comment 2

6 years ago
I am also experiencing this in FF4 but not in ff3.6

Comment 3

6 years ago
http://jsfiddle.net/sigmabetatooth/rv3DZ/ ;)
(Reporter)

Updated

6 years ago
Keywords: css-moz
This is happening to me too. I get gray border at the two edges of the first triangle.

Screenshot:
http://i.imgur.com/a7MiF.png
Does turning off d2d or hardware acceleration help?

Comment 6

6 years ago
tobias: Please verify your OS and FF version

(In reply to comment #4)
> This is happening to me too. I get gray border at the two edges of the first
> triangle.
> 
> Screenshot:
> http://i.imgur.com/a7MiF.png

Comment 7

6 years ago
Boris: great question. how do you turn these off?

(In reply to comment #5)
> Does turning off d2d or hardware acceleration help?
ff4 amd64/ linux

also I don't know if it is relevant, I noticed that if test goes over 200px then the top of the triangle it creates an artifact which you can see at this screenshot: http://i.imgur.com/OOFsX.png
turning off hardware acceleration (from options/preferences->advanced) doesn't change anything.
> Boris: great question. how do you turn these off?

Flip "gfx.direct2d.disabled" to "true" in about:config and restart to turn off direct2d.

tobias, did you restart after changing that preference?  It's not live last I checked.
(Reporter)

Comment 11

6 years ago
boris : the borders are still rendered... no change after disabling hardware acceleration...
The safemode already disabled the hardware acceleration
from comment#0 "nor does starting it in a safe mode."
(In reply to comment #10)
> > Boris: great question. how do you turn these off?
> 
> Flip "gfx.direct2d.disabled" to "true" in about:config and restart to turn off
> direct2d.
> 
> tobias, did you restart after changing that preference?  It's not live last I
> checked.

Yes i had restarted and I tried it just couple of minutes before to be sure. The option that changed at about:config was layers.acceleration.disabled when i disable hardware acceleration. About the gfx.direct2d.disabled, I don't have such an option, maybe because I use the stable 64bit linux release of ff4.
Ah, ok.  If you're seeing this on both Windows and Linux (and I don't see it on Mac, fwiw), then it sounds like a bug in Cairo path stuff...  We have a bunch of those already.  :(
Status: UNCONFIRMED → NEW
Ever confirmed: true

Comment 15

6 years ago
Boris: for future reference what is the "Cairo path stuff" you speak of and is there one particular bug example to look at?

(In reply to comment #14)
> Ah, ok.  If you're seeing this on both Windows and Linux (and I don't see it on
> Mac, fwiw), then it sounds like a bug in Cairo path stuff...  We have a bunch
> of those already.  :(
The "cairo path stuff" is the path tesselator and rasterizer in cairo.  We use it on Windows and Linux; we use the CoreGraphics path functionality directly on Mac.

Comment 17

6 years ago
Kumar: would you be willing to update this to reflect the discoveries.

Only ocures in windows and linux. Potentially related to Cairo. etc.
Version: unspecified → Trunk
(Reporter)

Updated

6 years ago
Whiteboard: The bug is known to occur only on Windows and Linux versions, and is supposedly caused by the Cairo Path Tesselator and Rasterizer. No occurence on a Mac has been reported

Comment 18

6 years ago
Created attachment 523003 [details]
testcase

Updated

6 years ago
Severity: minor → normal
Keywords: css-moz → testcase

Updated

6 years ago
Keywords: regression
OS: Windows 7 → All
Summary: Buggy Rendering of CSS Borders → Buggy Rendering of CSS Borders (gray shade on transparent borders)
Whiteboard: The bug is known to occur only on Windows and Linux versions, and is supposedly caused by the Cairo Path Tesselator and Rasterizer. No occurence on a Mac has been reported → Windows and Linux only, may be caused by the Cairo Path Tesselator and Rasterizer
Target Milestone: --- → mozilla2.0

Updated

6 years ago
Duplicate of this bug: 654193

Comment 20

6 years ago
Happening to me also in Win XP and 7 / FF4, but NOT Mac OS X:
http://jsbin.com/alame5 

Mac:
https://img.skitch.com/20110502-1j3b71c8w4s3c9m692kcxd4djf.jpg

Windows 7 (and XP):
https://img.skitch.com/20110502-j27inn3yq24te63baedpcgk5ys.jpg
(In reply to comment #20)
> Happening to me also in Win XP and 7 / FF4, but NOT Mac OS X:
> http://jsbin.com/alame5 
> 
> Mac:
> https://img.skitch.com/20110502-1j3b71c8w4s3c9m692kcxd4djf.jpg
> 
> Windows 7 (and XP):
> https://img.skitch.com/20110502-j27inn3yq24te63baedpcgk5ys.jpg

This bug will likely occur in any environment where Cairo draws the Gradient, Windows GDI or Linux. But not on Windows with Direct2D or on Mac where we use Quartz.
(Reporter)

Comment 22

6 years ago
(In reply to comment #21)
> (In reply to comment #20)
> > Happening to me also in Win XP and 7 / FF4, but NOT Mac OS X:
> > http://jsbin.com/alame5 
> > 
> > Mac:
> > https://img.skitch.com/20110502-1j3b71c8w4s3c9m692kcxd4djf.jpg
> > 
> > Windows 7 (and XP):
> > https://img.skitch.com/20110502-j27inn3yq24te63baedpcgk5ys.jpg
> 
> This bug will likely occur in any environment where Cairo draws the Gradient,
> Windows GDI or Linux. But not on Windows with Direct2D or on Mac where we use
> Quartz.

Can we use Direct2D instead of Cairo ??? (just asking)

Updated

6 years ago
Duplicate of this bug: 679335

Updated

6 years ago
Blocks: 588271
Target Milestone: mozilla2.0 → ---

Updated

6 years ago
Duplicate of this bug: 684522

Comment 25

6 years ago
I also noticed that the bug only applies to 'solid' border style. Dotted, dashed, ridge, double etc all seem to display correctly.

As a workaround for anyone that is interested in using it before the bug is fixed, you can replace your transparent borders with rgba(255,255,255,0).

e.g. border: 6px solid rgba(255,255,255,0.0);

Seems to work fine for me on FF6, Windows XP.

Comment 26

6 years ago
Confirming that workaround rgba(255,255,255,0) works, thanks!
Whiteboard: Windows and Linux only, may be caused by the Cairo Path Tesselator and Rasterizer → Workaround see comment 25
j.j, please don't nuke other people's whiteboard annotations.  They're used to track bugs and such...
Whiteboard: Workaround see comment 25 → [Workaround see comment 25][Windows and Linux only, may be caused by the Cairo Path Tesselator and Rasterizer]

Comment 28

6 years ago
I'd like to take this bug and suggest a fix.

If the following was introduced as css defaults the problem will go away.

  -moz-border-*-colors: transparent;

Also the following change in about:config fixes it but is potentially much more impactful (not backwards compatible, etc).

  gfx.direct2d.force-enabled = true

Could someone point me in the direction of how to make this change and submit it? This would be my first contribution to the community.

Comment 29

6 years ago
Also this bug is still present in 8.0
(In reply to Stephen Williams from comment #28)
> 
> Also the following change in about:config fixes it but is potentially much
> more impactful (not backwards compatible, etc).
> 
>   gfx.direct2d.force-enabled = true

Don't wanna do this! There's a reason we block cards and don't use Direct2D with them, there's no telling what could go wrong. :)

Comment 31

5 years ago
Still present in 9.0.1

Comment 32

5 years ago
Still present in FF 13.0a1 (2012-02-28) Nightly.

Comment 33

5 years ago
Created attachment 601526 [details]
testcase

This test-case exhibits the buggy behaviour for me (the other did not).
Attachment #601526 - Attachment mime type: text/plain → text/html

Comment 34

5 years ago
I tested in Nightly Mozilla/5.0 (Windows NT 6.1; WOW64; rv:14.0) Gecko/20120415 Firefox/14.0a1 and it's present if I disable HWA, so likely a bug with Cairo.

I tried to find a regression range, i.e. a build from which the gray border doesn't appear even if HWA is disabled:

m-c
good=2010-12-02
bad=2010-12-03
http://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=baa5ae44f0ba&tochange=0ff6d5984287

Maybe someone could confirm, but I think the regression is in:
Bug 588271 - Improve border rendering code for running on GPUs

Comment 35

5 years ago
Confirmed with HWA off.

Regression window:
Cannot reproduce
http://hg.mozilla.org/mozilla-central/rev/7ab0eb4c345b
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.0b8pre) Gecko/20101201 Firefox/4.0b8pre ID:20101202051834
Can eproduce:
http://hg.mozilla.org/mozilla-central/rev/ae06445eeff1
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.0b8pre) Gecko/20101202 Firefox/4.0b8pre ID:20101202052608
Pushlog:
http://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=7ab0eb4c345b&tochange=ae06445eeff1


Note:
I can also reproduce in Nightly14.0a1(Aurora 13.0a2 and Firefox12.0 as well) with enabled HWA and gfx.content.azure.enabled = true.
I filed new Bug 745709.
http://coderwall.com/p/tpmsta is a blog post (that Asa found) about this bug
Summary: Buggy Rendering of CSS Borders (gray shade on transparent borders) → dark diagonals at corner joins adjacent to transparent borders

Comment 37

5 years ago
Still present in Firefox 16.0.1 (Windows 7)
Please fix this soon.

Comment 38

5 years ago
The bug exists on FF 17.0.1 (Windows 7) too, can we get this fixed please?

Comment 39

5 years ago
This one is related to 644104.
Depends on: 644104
Still an issue on FF 25.0a1 (2013-07-16), NVIDIA GeForce 8400 GS, HWA off

Updated

3 years ago
Blocks: 1081148
20160502172042 Mozilla/5.0 (Windows NT 6.1; rv:46.0) Gecko/20100101 Firefox/46.0
20160518030234 Mozilla/5.0 (Windows NT 6.1; rv:49.0) Gecko/20100101 Firefox/49.0

I have tested your issue in Windows 7 on latest FF release 46.0.1 and latest Nightly build and could not reproduce it. 

Is this still reproducible on your end ? If yes, can you please retest this using latest FF release and latest Nightly build (https://nightly.mozilla.org/) and report back the results ? When doing this, please use a new clean Firefox profile, maybe even safe mode, to eliminate custom settings as a possible cause (https://goo.gl/PNe90E).
Status: NEW → RESOLVED
Last Resolved: a year ago
Resolution: --- → WORKSFORME

Comment 42

6 months ago
The issue is gone in latest version.
You need to log in before you can comment on or make changes to this bug.