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.
Pls use this URL for getting the code in question : http://jsfiddle.net/sigmabetatooth/rv3DZ/6/
I am also experiencing this in FF4 but not in ff3.6
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?
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
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.
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
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.
Kumar: would you be willing to update this to reflect the discoveries. Only ocures in windows and linux. Potentially related to Cairo. etc.
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
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
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.
(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)
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.
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]
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.
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. :)
Still present in 9.0.1
Still present in FF 13.0a1 (2012-02-28) Nightly.
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
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
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
Still present in Firefox 16.0.1 (Windows 7) Please fix this soon.
The bug exists on FF 17.0.1 (Windows 7) too, can we get this fixed please?
This one is related to 644104.
Still an issue on FF 25.0a1 (2013-07-16), NVIDIA GeForce 8400 GS, HWA off
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: 3 years ago
Resolution: --- → WORKSFORME
The issue is gone in latest version.
You need to log in before you can comment on or make changes to this bug.